From 744fb49476673637f3e23e3c48c5f71422c461ca Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Fri, 29 Nov 2024 16:54:25 -0300 Subject: [PATCH] v2.5.0 [BETA] (#4164) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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] * 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] * 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] * 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] * fix: image load on next.js (#3998) * ci(changesets): version packages (beta) (#3999) Co-authored-by: github-actions[bot] * fix: element.ref was removed in React 19 warning (#4003) * ci(changesets): version packages (beta) (#4004) Co-authored-by: github-actions[bot] * fix: react 19 as peer dep (#4008) * ci(changesets): version packages (beta) (#4009) Co-authored-by: github-actions[bot] * 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] * fix(theme): making select and input themes consistent (#3881) * ci(changesets): version packages (beta) (#4012) Co-authored-by: github-actions[bot] * fix: support inert value with boolean type for react 19 (#4039) * ci(changesets): version packages (beta) (#4041) Co-authored-by: github-actions[bot] * feat: alert design improved (#4054) * ci(changesets): version packages (beta) (#4056) Co-authored-by: github-actions[bot] * 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] * feat: alert styles improved (#4073) * ci(changesets): version packages (beta) (#4074) Co-authored-by: github-actions[bot] * 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] * chore: pnpm cleaned (#4086) * ci(changesets): version packages (beta) (#4087) Co-authored-by: github-actions[bot] * 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] * 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 * 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 * ci(changesets): version packages (beta) (#4106) Co-authored-by: github-actions[bot] * 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: աӄա Co-authored-by: Junior Garcia * fix: label placement when the select has a placeholder or description (#4126) * ci(changesets): version packages (beta) (#4107) Co-authored-by: github-actions[bot] * 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: աӄա Co-authored-by: Junior Garcia * feat(table): add isKeyboardNavigationDisabled prop to the table (#3735) Co-authored-by: Maharshi Alpesh * 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 Co-authored-by: WK Wong * 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] * chore: fix indentation * fix(changeset): package not be found * ci(changesets): version packages (beta) (#4158) Co-authored-by: github-actions[bot] * 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 * ci(changesets): version packages (beta) (#4159) Co-authored-by: github-actions[bot] * chore(changeset): bump all versions * ci(changesets): version packages (beta) (#4160) Co-authored-by: github-actions[bot] * 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 Co-authored-by: Junior Garcia * chore(docs): remove incorrect info * ci(changesets): version packages (beta) (#4162) Co-authored-by: github-actions[bot] * 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: աӄա 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 Co-authored-by: Junior Garcia * ci(changesets): version packages (beta) (#4169) Co-authored-by: github-actions[bot] * 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] * 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] * 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] * 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] * fix: image load on next.js (#3998) * ci(changesets): version packages (beta) (#3999) Co-authored-by: github-actions[bot] * fix: element.ref was removed in React 19 warning (#4003) * ci(changesets): version packages (beta) (#4004) Co-authored-by: github-actions[bot] * fix: react 19 as peer dep (#4008) * ci(changesets): version packages (beta) (#4009) Co-authored-by: github-actions[bot] * 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] * fix(theme): making select and input themes consistent (#3881) * ci(changesets): version packages (beta) (#4012) Co-authored-by: github-actions[bot] * 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] * feat: alert design improved (#4054) * ci(changesets): version packages (beta) (#4056) Co-authored-by: github-actions[bot] * 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] * feat: alert styles improved (#4073) * ci(changesets): version packages (beta) (#4074) Co-authored-by: github-actions[bot] * 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] * chore: pnpm cleaned (#4086) * ci(changesets): version packages (beta) (#4087) Co-authored-by: github-actions[bot] * 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] * 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 * 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 * ci(changesets): version packages (beta) (#4106) Co-authored-by: github-actions[bot] * 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: աӄա Co-authored-by: Junior Garcia * fix: label placement when the select has a placeholder or description (#4126) * ci(changesets): version packages (beta) (#4107) Co-authored-by: github-actions[bot] * 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: աӄա Co-authored-by: Junior Garcia * Update apps/docs/content/docs/components/textarea.mdx * feat(table): add isKeyboardNavigationDisabled prop to the table (#3735) Co-authored-by: Maharshi Alpesh * 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 Co-authored-by: WK Wong * 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] * chore: fix indentation * fix(changeset): package not be found * ci(changesets): version packages (beta) (#4158) Co-authored-by: github-actions[bot] * 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 * ci(changesets): version packages (beta) (#4159) Co-authored-by: github-actions[bot] * chore(changeset): bump all versions * ci(changesets): version packages (beta) (#4160) Co-authored-by: github-actions[bot] * 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 Co-authored-by: Junior Garcia * chore(docs): remove incorrect info * ci(changesets): version packages (beta) (#4162) Co-authored-by: github-actions[bot] * 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: աӄա 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 Co-authored-by: Junior Garcia * ci(changesets): version packages (beta) (#4169) Co-authored-by: github-actions[bot] * 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 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] Co-authored-by: Mustafa Balcı <19329346+mstfblci@users.noreply.github.com> Co-authored-by: Maharshi Alpesh Co-authored-by: Vincentius Roger Kuswara 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 Co-authored-by: chirokas <157580465+chirokas@users.noreply.github.com> * ci(changesets): version packages (beta) (#4170) Co-authored-by: github-actions[bot] * docs: sync api from nextui-cli v0.3.5 (#4173) Co-authored-by: GitHub Action * ci(changesets): exit pre-release mode --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: աӄա Co-authored-by: github-actions[bot] Co-authored-by: Mustafa Balcı <19329346+mstfblci@users.noreply.github.com> Co-authored-by: Maharshi Alpesh Co-authored-by: Vincentius Roger Kuswara 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 Co-authored-by: chirokas <157580465+chirokas@users.noreply.github.com> Co-authored-by: doki- <1335902682@qq.com> Co-authored-by: GitHub Action --- .changeset/angry-maps-serve.md | 5 + .changeset/brave-trains-wave.md | 6 + .changeset/calm-weeks-tie.md | 10 + .changeset/cold-dolls-vanish.md | 6 + .changeset/curly-rules-warn.md | 5 + .changeset/empty-helper-wrapper-div.md | 6 + .changeset/famous-experts-buy.md | 86 + .changeset/few-jars-flow.md | 16 +- .changeset/five-adults-protect.md | 7 + .changeset/fluffy-icons-refuse.md | 5 + .changeset/fuzzy-lies-brush.md | 5 + .changeset/gentle-needles-rescue.md | 5 + .changeset/happy-parrots-search.md | 5 + .changeset/kind-insects-end.md | 5 + .changeset/lazy-buttons-exercise.md | 7 + .changeset/light-needles-behave.md | 2 +- .changeset/many-starfishes-refuse.md | 5 + .changeset/moody-rabbits-shop.md | 7 + .changeset/nasty-bees-sniff.md | 7 + .changeset/neat-donkeys-accept.md | 4 +- .changeset/new-cougars-collect.md | 6 + .changeset/plenty-scissors-love.md | 77 + .changeset/polite-mails-kneel.md | 46 + .changeset/pretty-parrots-guess.md | 5 + .changeset/proud-chicken-impress.md | 7 + .changeset/purple-berries-play.md | 5 + .changeset/red-camels-build.md | 86 + .changeset/selfish-baboons-know.md | 7 + .changeset/sharp-pianos-pump.md | 9 + .changeset/silly-candles-wonder.md | 86 + .changeset/sixty-ties-knock.md | 6 + .changeset/slow-paws-punch.md | 2 +- .changeset/sour-bikes-burn.md | 87 + .changeset/spotty-flies-jump.md | 7 + .changeset/spotty-spies-call.md | 5 + .changeset/tame-planes-think.md | 86 + .changeset/ten-paws-relate.md | 5 + .changeset/tender-buses-sort.md | 86 + .changeset/tiny-laws-cheer.md | 5 + .changeset/tough-brooms-hunt.md | 5 + .changeset/twelve-trains-smile.md | 5 + .changeset/wild-jobs-explain.md | 2 +- .github/workflows/pre-release.yaml | 19 +- .github/workflows/update-stats.yml | 42 + .gitignore | 1 + .vscode/settings.json | 2 +- apps/docs/.eslintrc.json | 4 - .../components/code-demo/react-live-demo.tsx | 2 + .../docs/components/code-demo/utils.ts | 4 +- .../components/docs/components/codeblock.tsx | 110 +- .../docs/components/docs/components/helper.ts | 189 + apps/docs/components/docs/sidebar.tsx | 7 +- apps/docs/components/footer.tsx | 36 + apps/docs/components/icons/moon.tsx | 2 +- apps/docs/components/icons/sun.tsx | 26 + apps/docs/components/mdx-components.tsx | 7 +- apps/docs/components/navbar.tsx | 85 +- apps/docs/components/theme-switch.tsx | 8 +- apps/docs/config/github-info.json | 6 + apps/docs/config/routes.json | 75 +- apps/docs/config/search-meta.json | 3399 ++++++++++------- .../accordion/custom-styles.raw.jsx | 368 +- .../accordion/indicator-function.raw.jsx | 146 +- .../components/accordion/indicator.raw.jsx | 146 +- .../content/components/alert/colors.raw.jsx | 15 + apps/docs/content/components/alert/colors.ts | 19 +- .../components/alert/controlled.raw.jsx | 28 + .../content/components/alert/controlled.ts | 29 +- .../components/alert/custom-impl.raw.jsx | 124 + .../content/components/alert/custom-impl.ts | 135 +- .../components/alert/custom-styles.raw.jsx | 91 + .../components/alert/custom-styles.raw.tsx | 87 + .../content/components/alert/custom-styles.ts | 34 +- apps/docs/content/components/alert/index.ts | 4 + .../content/components/alert/radius.raw.jsx | 15 + apps/docs/content/components/alert/radius.ts | 19 +- .../content/components/alert/usage.raw.jsx | 12 + apps/docs/content/components/alert/usage.ts | 13 +- .../content/components/alert/variants.raw.jsx | 16 + .../docs/content/components/alert/variants.ts | 18 +- .../components/alert/with-action.raw.jsx | 19 + .../content/components/alert/with-action.ts | 9 + .../components/alert/with-icon.raw.jsx | 33 + .../content/components/alert/with-icon.ts | 47 +- .../components/alert/without-icon.raw.jsx | 12 + .../content/components/alert/without-icon.ts | 9 + .../autocomplete/async-filtering.raw.jsx | 34 + .../autocomplete/async-filtering.raw.tsx | 41 + .../autocomplete/async-filtering.ts | 78 +- .../autocomplete/async-loading-items.raw.jsx | 99 + .../autocomplete/async-loading-items.raw.tsx | 110 + .../autocomplete/async-loading-items.ts | 179 +- .../components/autocomplete/colors.raw.jsx | 51 + .../content/components/autocomplete/colors.ts | 61 +- .../autocomplete/controlled.raw.jsx | 51 + .../autocomplete/controlled.raw.tsx | 51 + .../components/autocomplete/controlled.ts | 79 +- .../custom-empty-content-message.raw.jsx | 47 + .../custom-empty-content-message.ts | 50 +- .../autocomplete/custom-filtering.raw.jsx | 57 + .../autocomplete/custom-filtering.raw.tsx | 57 + .../autocomplete/custom-filtering.ts | 91 +- .../autocomplete/custom-items.raw.jsx | 229 ++ .../components/autocomplete/custom-items.ts | 232 +- .../custom-sections-style.raw.jsx | 49 + .../autocomplete/custom-sections-style.ts | 49 +- .../autocomplete/custom-selector-icon.raw.jsx | 68 + .../autocomplete/custom-selector-icon.ts | 71 +- .../autocomplete/custom-styles.raw.jsx | 303 ++ .../components/autocomplete/custom-styles.ts | 312 +- .../autocomplete/custom-value.raw.jsx | 43 + .../components/autocomplete/custom-value.ts | 46 +- .../autocomplete/description.raw.jsx | 44 + .../components/autocomplete/description.ts | 47 +- .../autocomplete/disabled-items.raw.jsx | 43 + .../components/autocomplete/disabled-items.ts | 46 +- .../components/autocomplete/disabled.raw.jsx | 44 + .../components/autocomplete/disabled.ts | 47 +- .../components/autocomplete/dynamic.raw.jsx | 42 + .../components/autocomplete/dynamic.ts | 45 +- .../autocomplete/error-message.raw.jsx | 54 + .../components/autocomplete/error-message.ts | 57 +- .../components/autocomplete/events.raw.jsx | 60 + .../components/autocomplete/events.raw.tsx | 61 + .../content/components/autocomplete/events.ts | 103 +- .../autocomplete/fully-controlled.raw.jsx | 96 + .../autocomplete/fully-controlled.raw.tsx | 103 + .../autocomplete/fully-controlled.ts | 180 +- .../content/components/autocomplete/index.ts | 8 + .../autocomplete/item-start-content.raw.jsx | 68 + .../autocomplete/item-start-content.ts | 68 +- .../autocomplete/label-placements.raw.jsx | 72 + .../autocomplete/label-placements.ts | 79 +- .../components/autocomplete/read-only.raw.jsx | 44 + .../components/autocomplete/read-only.ts | 47 +- .../components/autocomplete/required.raw.jsx | 44 + .../components/autocomplete/required.ts | 47 +- .../components/autocomplete/sections.raw.jsx | 28 + .../components/autocomplete/sections.ts | 33 +- .../components/autocomplete/sizes.raw.jsx | 59 + .../content/components/autocomplete/sizes.ts | 62 +- .../autocomplete/start-content.raw.jsx | 81 + .../components/autocomplete/start-content.ts | 84 +- .../components/autocomplete/usage.raw.jsx | 49 + .../content/components/autocomplete/usage.ts | 57 +- .../components/autocomplete/variants.raw.jsx | 60 + .../components/autocomplete/variants.ts | 65 +- .../virtualization-custom-item-height.ts | 65 + .../virtualization-max-listbox-height.ts | 64 + .../virtualization-ten-thousand.ts | 63 + .../components/autocomplete/virtualization.ts | 63 + .../without-scroll-shadow.raw.jsx | 46 + .../autocomplete/without-scroll-shadow.ts | 49 +- .../components/avatar/bordered.raw.jsx | 14 + .../content/components/avatar/bordered.ts | 15 +- .../content/components/avatar/colors.raw.jsx | 14 + apps/docs/content/components/avatar/colors.ts | 15 +- .../components/avatar/custom-fallback.raw.jsx | 41 + .../components/avatar/custom-fallback.ts | 36 +- .../components/avatar/custom-impl.raw.jsx | 60 + .../components/avatar/custom-impl.raw.tsx | 62 + .../content/components/avatar/custom-impl.ts | 128 +- .../content/components/avatar/custom.raw.jsx | 15 + apps/docs/content/components/avatar/custom.ts | 16 +- .../components/avatar/disabled.raw.jsx | 14 + .../content/components/avatar/disabled.ts | 15 +- .../components/avatar/fallbacks.raw.jsx | 11 + .../content/components/avatar/fallbacks.ts | 12 +- .../avatar/group-custom-count.raw.jsx | 21 + .../components/avatar/group-custom-count.ts | 22 +- .../avatar/group-custom-impl.raw.jsx | 29 + .../avatar/group-custom-impl.raw.tsx | 36 + .../components/avatar/group-custom-impl.ts | 67 +- .../components/avatar/group-disabled.raw.jsx | 14 + .../components/avatar/group-disabled.ts | 15 +- .../components/avatar/group-grid.raw.jsx | 17 + .../content/components/avatar/group-grid.ts | 18 +- .../components/avatar/group-max.raw.jsx | 14 + .../content/components/avatar/group-max.ts | 15 +- .../components/avatar/group-total.raw.jsx | 14 + .../content/components/avatar/group-total.ts | 15 +- .../content/components/avatar/group.raw.jsx | 14 + apps/docs/content/components/avatar/group.ts | 15 +- .../content/components/avatar/radius.raw.jsx | 12 + apps/docs/content/components/avatar/radius.ts | 13 +- .../content/components/avatar/sizes.raw.jsx | 16 + apps/docs/content/components/avatar/sizes.ts | 14 +- .../content/components/avatar/usage.raw.jsx | 14 + apps/docs/content/components/avatar/usage.ts | 15 +- .../content/components/badge/a11y.raw.jsx | 31 + apps/docs/content/components/badge/a11y.ts | 39 +- .../content/components/badge/colors.raw.jsx | 26 + apps/docs/content/components/badge/colors.ts | 45 +- .../components/badge/content-examples.raw.jsx | 80 + .../components/badge/content-examples.ts | 105 +- .../components/badge/placements.raw.jsx | 20 + .../content/components/badge/placements.ts | 37 +- .../content/components/badge/shapes.raw.jsx | 14 + apps/docs/content/components/badge/shapes.ts | 23 +- .../components/badge/show-outline.raw.jsx | 14 + .../content/components/badge/show-outline.ts | 23 +- .../content/components/badge/sizes.raw.jsx | 17 + apps/docs/content/components/badge/sizes.ts | 27 +- .../content/components/badge/usage.raw.jsx | 9 + apps/docs/content/components/badge/usage.ts | 14 +- .../content/components/badge/variants.raw.jsx | 20 + .../docs/content/components/badge/variants.ts | 33 +- .../components/badge/visibility.raw.jsx | 71 + .../content/components/badge/visibility.ts | 76 +- .../breadcrumbs/collapsing-items.raw.jsx | 13 + .../breadcrumbs/collapsing-items.ts | 14 +- .../components/breadcrumbs/colors.raw.jsx | 19 + .../content/components/breadcrumbs/colors.ts | 20 +- .../components/breadcrumbs/controlled.raw.jsx | 25 + .../components/breadcrumbs/controlled.raw.tsx | 26 + .../components/breadcrumbs/controlled.ts | 53 +- .../breadcrumbs/custom-items.raw.jsx | 70 + .../components/breadcrumbs/custom-items.ts | 69 +- .../breadcrumbs/custom-styles.raw.jsx | 56 + .../components/breadcrumbs/custom-styles.ts | 57 +- .../breadcrumbs/customizing-ellipsis.raw.jsx | 45 + .../breadcrumbs/customizing-ellipsis.ts | 43 +- .../components/breadcrumbs/disabled.raw.jsx | 13 + .../components/breadcrumbs/disabled.ts | 14 +- .../components/breadcrumbs/menu-type.raw.jsx | 39 + .../components/breadcrumbs/menu-type.raw.tsx | 39 + .../components/breadcrumbs/menu-type.ts | 80 +- .../components/breadcrumbs/radius.raw.jsx | 19 + .../content/components/breadcrumbs/radius.ts | 20 +- .../components/breadcrumbs/routing.raw.jsx | 13 + .../content/components/breadcrumbs/routing.ts | 14 +- .../components/breadcrumbs/separator.raw.jsx | 18 + .../components/breadcrumbs/separator.ts | 19 +- .../components/breadcrumbs/sizes.raw.jsx | 19 + .../content/components/breadcrumbs/sizes.ts | 20 +- .../breadcrumbs/start-end-content.raw.jsx | 137 + .../breadcrumbs/start-end-content.ts | 105 +- .../components/breadcrumbs/underlines.raw.jsx | 31 + .../components/breadcrumbs/underlines.ts | 32 +- .../components/breadcrumbs/usage.raw.jsx | 13 + .../content/components/breadcrumbs/usage.ts | 14 +- .../components/breadcrumbs/variants.raw.jsx | 19 + .../components/breadcrumbs/variants.ts | 20 +- .../content/components/button/colors.raw.jsx | 14 + apps/docs/content/components/button/colors.ts | 27 +- .../components/button/custom-impl.raw.jsx | 38 + .../components/button/custom-impl.raw.tsx | 40 + .../content/components/button/custom-impl.ts | 82 +- .../components/button/custom-styles.raw.jsx | 12 + .../components/button/custom-styles.ts | 10 +- .../components/button/disabled.raw.jsx | 9 + .../content/components/button/disabled.ts | 10 +- .../components/button/group-disabled.raw.jsx | 11 + .../components/button/group-disabled.ts | 12 +- .../components/button/group-use-case.raw.jsx | 71 + .../components/button/group-use-case.ts | 62 +- .../content/components/button/group.raw.jsx | 11 + apps/docs/content/components/button/group.ts | 12 +- .../components/button/icon-only.raw.jsx | 55 + .../content/components/button/icon-only.ts | 77 +- .../content/components/button/icons.raw.jsx | 62 + apps/docs/content/components/button/icons.ts | 86 +- .../components/button/loading-custom.raw.jsx | 34 + .../components/button/loading-custom.ts | 35 +- .../content/components/button/loading.raw.jsx | 9 + .../docs/content/components/button/loading.ts | 10 +- .../content/components/button/radius.raw.jsx | 13 + apps/docs/content/components/button/radius.ts | 24 +- .../content/components/button/sizes.raw.jsx | 11 + apps/docs/content/components/button/sizes.ts | 18 +- .../content/components/button/usage.raw.jsx | 5 + apps/docs/content/components/button/usage.ts | 10 +- .../components/button/variants.raw.jsx | 29 + .../content/components/button/variants.ts | 30 +- .../calendar/controlled-focused-value.raw.jsx | 16 + .../calendar/controlled-focused-value.raw.tsx | 19 + .../calendar/controlled-focused-value.ts | 40 +- .../components/calendar/controlled.raw.jsx | 8 + .../components/calendar/controlled.raw.tsx | 11 + .../content/components/calendar/controlled.ts | 36 +- .../components/calendar/disabled.raw.jsx | 5 + .../content/components/calendar/disabled.ts | 8 +- .../calendar/international-calendars.raw.jsx | 10 + .../calendar/international-calendars.ts | 11 +- .../components/calendar/invalid-date.raw.jsx | 19 + .../components/calendar/invalid-date.raw.tsx | 22 + .../components/calendar/invalid-date.ts | 48 +- .../calendar/max-date-value.raw.jsx | 12 + .../components/calendar/max-date-value.ts | 13 +- .../calendar/min-date-value.raw.jsx | 12 + .../components/calendar/min-date-value.ts | 13 +- .../calendar/page-behaviour.raw.jsx | 5 + .../components/calendar/page-behaviour.ts | 11 +- .../components/calendar/presets.raw.jsx | 87 + .../components/calendar/presets.raw.tsx | 90 + .../content/components/calendar/presets.ts | 182 +- .../components/calendar/read-only.raw.jsx | 6 + .../content/components/calendar/read-only.ts | 13 +- .../calendar/unavailable-dates.raw.jsx | 23 + .../components/calendar/unavailable-dates.ts | 30 +- .../content/components/calendar/usage.raw.jsx | 11 + .../docs/content/components/calendar/usage.ts | 12 +- .../calendar/visible-months.raw.jsx | 5 + .../components/calendar/visible-months.ts | 11 +- .../with-month-and-year-picker.raw.jsx | 5 + .../calendar/with-month-and-year-picker.ts | 11 +- .../components/card/blurred-footer.raw.jsx | 27 + .../content/components/card/blurred-footer.ts | 26 +- .../content/components/card/blurred.raw.jsx | 264 ++ apps/docs/content/components/card/blurred.ts | 265 +- .../components/card/composition.raw.jsx | 53 + .../content/components/card/composition.ts | 51 +- .../components/card/cover-image.raw.jsx | 93 + .../content/components/card/cover-image.ts | 92 +- .../content/components/card/divider.raw.jsx | 31 + apps/docs/content/components/card/divider.ts | 36 +- .../content/components/card/image.raw.jsx | 21 + apps/docs/content/components/card/image.ts | 22 +- .../components/card/primary-action.raw.jsx | 70 + .../content/components/card/primary-action.ts | 70 +- .../content/components/card/usage.raw.jsx | 11 + apps/docs/content/components/card/usage.ts | 12 +- .../checkbox-group/controlled.raw.jsx | 21 + .../components/checkbox-group/controlled.ts | 22 +- .../custom-implementation.raw.jsx | 94 + .../checkbox-group/custom-implementation.ts | 108 +- .../checkbox-group/custom-styles.raw.jsx | 104 + .../checkbox-group/custom-styles.ts | 111 +- .../checkbox-group/disabled.raw.jsx | 13 + .../components/checkbox-group/disabled.ts | 18 +- .../checkbox-group/horizontal.raw.jsx | 18 + .../components/checkbox-group/horizontal.ts | 19 +- .../components/checkbox-group/invalid.raw.jsx | 23 + .../components/checkbox-group/invalid.ts | 24 +- .../components/checkbox-group/usage.raw.jsx | 13 + .../components/checkbox-group/usage.ts | 17 +- .../components/checkbox/colors.raw.jsx | 26 + .../content/components/checkbox/colors.ts | 15 +- .../components/checkbox/controlled.raw.jsx | 14 + .../content/components/checkbox/controlled.ts | 17 +- .../checkbox/custom-check-icon.raw.jsx | 68 + .../components/checkbox/custom-check-icon.ts | 68 +- .../checkbox/custom-implementation.raw.jsx | 70 + .../checkbox/custom-implementation.ts | 78 +- .../components/checkbox/custom-styles.raw.jsx | 49 + .../components/checkbox/custom-styles.ts | 50 +- .../components/checkbox/disabled.raw.jsx | 12 + .../content/components/checkbox/disabled.ts | 11 +- .../components/checkbox/indeterminate.raw.jsx | 5 + .../components/checkbox/indeterminate.ts | 8 +- .../components/checkbox/line-through.raw.jsx | 9 + .../components/checkbox/line-through.ts | 8 +- .../components/checkbox/radius.raw.jsx | 23 + .../content/components/checkbox/radius.ts | 14 +- .../content/components/checkbox/sizes.raw.jsx | 17 + .../docs/content/components/checkbox/sizes.ts | 12 +- .../content/components/checkbox/usage.raw.jsx | 5 + .../docs/content/components/checkbox/usage.ts | 8 +- .../content/components/chip/avatar.raw.jsx | 20 + apps/docs/content/components/chip/avatar.ts | 28 +- .../components/chip/close-button.raw.jsx | 14 + .../content/components/chip/close-button.ts | 13 +- .../content/components/chip/colors.raw.jsx | 14 + apps/docs/content/components/chip/colors.ts | 15 +- .../components/chip/custom-styles.raw.jsx | 15 + .../content/components/chip/custom-styles.ts | 16 +- .../content/components/chip/disabled.raw.jsx | 9 + apps/docs/content/components/chip/disabled.ts | 8 +- .../docs/content/components/chip/list.raw.jsx | 24 + apps/docs/content/components/chip/list.ts | 25 +- .../content/components/chip/radius.raw.jsx | 12 + apps/docs/content/components/chip/radius.ts | 13 +- .../content/components/chip/sizes.raw.jsx | 11 + apps/docs/content/components/chip/sizes.ts | 12 +- .../components/chip/start-end-content.raw.jsx | 52 + .../components/chip/start-end-content.ts | 67 +- .../content/components/chip/usage.raw.jsx | 5 + apps/docs/content/components/chip/usage.ts | 8 +- .../content/components/chip/variants.raw.jsx | 29 + apps/docs/content/components/chip/variants.ts | 16 +- .../circular-progress/colors.raw.jsx | 14 + .../components/circular-progress/colors.ts | 15 +- .../circular-progress/custom-styles.raw.jsx | 32 + .../circular-progress/custom-styles.ts | 33 +- .../circular-progress/label.raw.jsx | 5 + .../components/circular-progress/label.ts | 8 +- .../circular-progress/sizes.raw.jsx | 11 + .../components/circular-progress/sizes.ts | 12 +- .../circular-progress/usage.raw.jsx | 5 + .../components/circular-progress/usage.ts | 8 +- .../value-formatting.raw.jsx | 14 + .../circular-progress/value-formatting.ts | 15 +- .../circular-progress/value.raw.jsx | 23 + .../components/circular-progress/value.ts | 24 +- .../content/components/code/colors.raw.jsx | 14 + apps/docs/content/components/code/colors.ts | 15 +- .../content/components/code/sizes.raw.jsx | 11 + apps/docs/content/components/code/sizes.ts | 12 +- .../content/components/code/usage.raw.jsx | 5 + apps/docs/content/components/code/usage.ts | 8 +- .../components/date-input/controlled.raw.jsx | 20 + .../components/date-input/controlled.raw.tsx | 21 + .../components/date-input/controlled.ts | 47 +- .../components/date-input/description.raw.jsx | 14 + .../components/date-input/description.ts | 15 +- .../components/date-input/disabled.raw.jsx | 15 + .../content/components/date-input/disabled.ts | 16 +- .../date-input/error-message-function.raw.jsx | 22 + .../date-input/error-message-function.ts | 23 +- .../date-input/error-message.raw.jsx | 18 + .../components/date-input/error-message.ts | 19 +- .../components/date-input/granularity.raw.jsx | 19 + .../components/date-input/granularity.raw.tsx | 20 + .../components/date-input/granularity.ts | 57 +- .../date-input/hide-timezone.raw.jsx | 14 + .../components/date-input/hide-timezone.ts | 15 +- .../date-input/hourly-cycle.raw.jsx | 15 + .../components/date-input/hourly-cycle.ts | 16 +- .../date-input/international-calendar.raw.jsx | 15 + .../date-input/international-calendar.raw.tsx | 16 + .../date-input/international-calendar.ts | 37 +- .../date-input/label-placements.raw.jsx | 20 + .../components/date-input/label-placements.ts | 24 +- .../date-input/min-and-max-date.raw.jsx | 25 + .../components/date-input/min-and-max-date.ts | 26 +- .../components/date-input/readonly.raw.jsx | 15 + .../content/components/date-input/readonly.ts | 16 +- .../components/date-input/required.raw.jsx | 15 + .../content/components/date-input/required.ts | 16 +- .../date-input/start-end-content.raw.jsx | 55 + .../date-input/start-end-content.ts | 56 +- .../components/date-input/time-zones.raw.jsx | 19 + .../components/date-input/time-zones.ts | 20 +- .../components/date-input/usage.raw.jsx | 14 + .../content/components/date-input/usage.ts | 11 +- .../components/date-input/variants.raw.jsx | 20 + .../content/components/date-input/variants.ts | 17 +- .../components/date-picker/controlled.raw.jsx | 30 + .../components/date-picker/controlled.raw.tsx | 31 + .../components/date-picker/controlled.ts | 49 +- .../date-picker/description.raw.jsx | 13 + .../components/date-picker/description.ts | 14 +- .../components/date-picker/disabled.raw.jsx | 9 + .../components/date-picker/disabled.ts | 14 +- .../error-message-function.raw.jsx | 18 + .../date-picker/error-message-function.ts | 19 +- .../date-picker/error-message.raw.jsx | 14 + .../components/date-picker/error-message.ts | 15 +- .../date-picker/granularity.raw.jsx | 32 + .../date-picker/granularity.raw.tsx | 33 + .../international-calendar.raw.jsx | 22 + .../international-calendar.raw.tsx | 23 + .../date-picker/international-calendar.ts | 51 +- .../date-picker/label-placements.raw.jsx | 23 + .../date-picker/label-placements.ts | 27 +- .../date-picker/min-and-max-date.raw.jsx | 25 + .../date-picker/min-and-max-date.ts | 26 +- .../date-picker/page-behavior.raw.jsx | 9 + .../components/date-picker/page-behavior.ts | 14 +- .../components/date-picker/preset.raw.jsx | 92 + .../components/date-picker/preset.raw.tsx | 99 + .../content/components/date-picker/preset.ts | 191 +- .../components/date-picker/readonly.raw.jsx | 9 + .../components/date-picker/readonly.ts | 14 +- .../components/date-picker/required.raw.jsx | 9 + .../components/date-picker/required.ts | 14 +- .../selector-button-placement.raw.jsx | 10 + .../date-picker/selector-button-placement.ts | 17 +- .../date-picker/selector-icon.raw.jsx | 27 + .../components/date-picker/selector-icon.ts | 31 +- .../components/date-picker/time-zones.raw.jsx | 21 + .../components/date-picker/time-zones.ts | 22 +- .../date-picker/unavailable-dates.raw.jsx | 30 + .../date-picker/unavailable-dates.ts | 31 +- .../components/date-picker/usage.raw.jsx | 5 + .../content/components/date-picker/usage.ts | 8 +- .../components/date-picker/variants.raw.jsx | 15 + .../components/date-picker/variants.ts | 16 +- .../date-picker/visible-month.raw.jsx | 9 + .../components/date-picker/visible-month.ts | 13 +- .../with-month-and-year-pickers.raw.jsx | 9 + .../with-month-and-year-pickers.ts | 14 +- .../date-picker/with-time-field.raw.jsx | 16 + .../components/date-picker/with-time-field.ts | 17 +- .../date-range-picker/controlled.raw.jsx | 36 + .../date-range-picker/controlled.raw.tsx | 40 + .../date-range-picker/controlled.ts | 85 +- .../date-range-picker/custom-styles.raw.jsx | 33 + .../date-range-picker/custom-styles.ts | 34 +- .../date-range-picker/description.raw.jsx | 11 + .../date-range-picker/description.ts | 12 +- .../date-range-picker/disabled.raw.jsx | 16 + .../components/date-range-picker/disabled.ts | 17 +- .../error-message-function.raw.jsx | 22 + .../error-message-function.ts | 23 +- .../date-range-picker/error-message.raw.jsx | 18 + .../date-range-picker/error-message.ts | 19 +- .../date-range-picker/granularity.raw.jsx | 28 + .../date-range-picker/granularity.raw.tsx | 32 + .../date-range-picker/granularity.ts | 64 +- .../international-calendar.raw.jsx | 18 + .../international-calendar.raw.tsx | 22 + .../international-calendar.ts | 44 +- .../label-placements.raw.jsx | 20 + .../date-range-picker/label-placements.ts | 25 +- .../min-and-max-date.raw.jsx | 31 + .../date-range-picker/min-and-max-date.ts | 32 +- .../date-range-picker/non-contiguous.raw.jsx | 17 + .../date-range-picker/non-contiguous.ts | 18 +- .../date-range-picker/page-behavior.raw.jsx | 9 + .../date-range-picker/page-behavior.ts | 14 +- .../date-range-picker/presets.raw.jsx | 122 + .../components/date-range-picker/presets.ts | 236 +- .../date-range-picker/readonly.raw.jsx | 16 + .../components/date-range-picker/readonly.ts | 17 +- .../date-range-picker/required.raw.jsx | 16 + .../components/date-range-picker/required.ts | 17 +- .../selector-button-placement.raw.jsx | 10 + .../selector-button-placement.ts | 17 +- .../date-range-picker/selector-icon.raw.jsx | 27 + .../date-range-picker/selector-icon.ts | 30 +- .../date-range-picker/time-zones.raw.jsx | 25 + .../date-range-picker/time-zones.ts | 26 +- .../unavailable-dates.raw.jsx | 33 + .../date-range-picker/unavailable-dates.ts | 34 +- .../date-range-picker/usage.raw.jsx | 5 + .../components/date-range-picker/usage.ts | 11 +- .../date-range-picker/variants.raw.jsx | 15 + .../components/date-range-picker/variants.ts | 20 +- .../date-range-picker/visible-month.raw.jsx | 9 + .../date-range-picker/visible-month.ts | 13 +- .../with-month-and-year-pickers.raw.jsx | 9 + .../with-month-and-year-pickers.ts | 14 +- .../date-range-picker/with-time-field.raw.jsx | 18 + .../date-range-picker/with-time-field.ts | 19 +- .../content/components/divider/usage.raw.jsx | 20 + apps/docs/content/components/divider/usage.ts | 21 +- .../components/drawer/backdrop.raw.jsx | 134 + .../content/components/drawer/backdrop.ts | 125 +- .../components/drawer/custom-motion.raw.jsx | 61 + .../components/drawer/custom-motion.ts | 56 +- .../components/drawer/custom-styles.raw.jsx | 342 ++ .../components/drawer/custom-styles.ts | 9 + .../content/components/drawer/form.raw.jsx | 116 + apps/docs/content/components/drawer/form.ts | 108 +- apps/docs/content/components/drawer/index.ts | 2 + .../components/drawer/non-dismissable.raw.jsx | 52 + .../components/drawer/non-dismissable.ts | 45 +- .../components/drawer/placement.raw.jsx | 60 + .../content/components/drawer/placement.ts | 61 +- .../content/components/drawer/sizes.raw.jsx | 62 + apps/docs/content/components/drawer/sizes.ts | 57 +- .../content/components/drawer/usage.raw.jsx | 55 + apps/docs/content/components/drawer/usage.ts | 48 +- .../components/dropdown/action.raw.jsx | 19 + .../content/components/dropdown/action.ts | 27 +- .../components/dropdown/backdrop.raw.jsx | 19 + .../content/components/dropdown/backdrop.ts | 24 +- .../dropdown/custom-items-styles.raw.jsx | 123 + .../dropdown/custom-items-styles.ts | 124 +- .../dropdown/custom-popover-styles.raw.jsx | 178 + .../dropdown/custom-popover-styles.ts | 174 +- .../dropdown/custom-trigger.raw.jsx | 69 + .../components/dropdown/custom-trigger.ts | 75 +- .../components/dropdown/description.raw.jsx | 160 + .../components/dropdown/description.ts | 165 +- .../components/dropdown/disabled-keys.raw.jsx | 19 + .../components/dropdown/disabled-keys.ts | 24 +- .../components/dropdown/dynamic.raw.jsx | 41 + .../content/components/dropdown/dynamic.ts | 46 +- .../content/components/dropdown/icons.raw.jsx | 155 + .../docs/content/components/dropdown/icons.ts | 160 +- .../dropdown/multiple-selection.raw.jsx | 35 + .../dropdown/multiple-selection.raw.tsx | 38 + .../components/dropdown/multiple-selection.ts | 84 +- .../components/dropdown/sections.raw.jsx | 171 + .../content/components/dropdown/sections.ts | 168 +- .../components/dropdown/shortcut.raw.jsx | 25 + .../content/components/dropdown/shortcut.ts | 24 +- .../dropdown/single-selection.raw.jsx | 34 + .../dropdown/single-selection.raw.tsx | 37 + .../components/dropdown/single-selection.ts | 82 +- .../content/components/dropdown/usage.raw.jsx | 19 + .../docs/content/components/dropdown/usage.ts | 24 +- .../components/dropdown/variants.raw.jsx | 55 + .../content/components/dropdown/variants.ts | 56 +- .../content/components/image/blurred.raw.jsx | 13 + apps/docs/content/components/image/blurred.ts | 14 +- .../content/components/image/fallback.raw.jsx | 13 + .../docs/content/components/image/fallback.ts | 14 +- .../content/components/image/loading.raw.jsx | 12 + apps/docs/content/components/image/loading.ts | 13 +- .../content/components/image/nextjs.raw.jsx | 14 + apps/docs/content/components/image/nextjs.ts | 15 +- .../content/components/image/usage.raw.jsx | 11 + apps/docs/content/components/image/usage.ts | 12 +- .../content/components/image/zoomed.raw.jsx | 12 + apps/docs/content/components/image/zoomed.ts | 13 +- apps/docs/content/components/index.ts | 1 + .../components/input-otp/allowed-keys.raw.jsx | 25 + .../components/input-otp/allowed-keys.ts | 9 + .../components/input-otp/colors.raw.jsx | 16 + .../content/components/input-otp/colors.ts | 9 + .../components/input-otp/controlled.raw.jsx | 13 + .../components/input-otp/controlled.ts | 9 + .../input-otp/custom-styles.raw.jsx | 33 + .../components/input-otp/custom-styles.ts | 9 + .../components/input-otp/description.raw.jsx | 9 + .../components/input-otp/description.ts | 9 + .../components/input-otp/disabled.raw.jsx | 9 + .../content/components/input-otp/disabled.ts | 9 + .../input-otp/error-message.raw.jsx | 9 + .../components/input-otp/error-message.ts | 9 + .../content/components/input-otp/form.raw.jsx | 46 + .../content/components/input-otp/form.raw.tsx | 50 + .../docs/content/components/input-otp/form.ts | 15 + .../content/components/input-otp/index.ts | 35 + .../components/input-otp/lengths.raw.jsx | 17 + .../content/components/input-otp/lengths.ts | 9 + .../components/input-otp/password.raw.jsx | 9 + .../content/components/input-otp/password.ts | 9 + .../components/input-otp/radius.raw.jsx | 16 + .../content/components/input-otp/radius.ts | 9 + .../components/input-otp/readonly.raw.jsx | 9 + .../content/components/input-otp/readonly.ts | 9 + .../components/input-otp/required.raw.jsx | 28 + .../content/components/input-otp/required.ts | 9 + .../components/input-otp/sizes.raw.jsx | 16 + .../content/components/input-otp/sizes.ts | 9 + .../components/input-otp/usage.raw.jsx | 15 + .../components/input-otp/usage.raw.tsx | 15 + .../content/components/input-otp/usage.ts | 15 + .../components/input-otp/variants.raw.jsx | 16 + .../content/components/input-otp/variants.ts | 9 + .../components/input/clear-button.raw.jsx | 17 + .../content/components/input/clear-button.ts | 17 +- .../content/components/input/colors.raw.jsx | 21 + apps/docs/content/components/input/colors.ts | 29 +- .../components/input/controlled.raw.jsx | 12 + .../content/components/input/controlled.ts | 18 +- .../components/input/custom-impl.raw.jsx | 162 + .../content/components/input/custom-impl.ts | 159 +- .../components/input/custom-styles.raw.jsx | 68 + .../content/components/input/custom-styles.ts | 69 +- .../components/input/description.raw.jsx | 13 + .../content/components/input/description.ts | 14 +- .../content/components/input/disabled.raw.jsx | 13 + .../docs/content/components/input/disabled.ts | 14 +- .../components/input/error-message.raw.jsx | 15 + .../content/components/input/error-message.ts | 16 +- .../components/input/label-placements.raw.jsx | 39 + .../components/input/label-placements.ts | 44 +- .../content/components/input/password.raw.jsx | 91 + .../docs/content/components/input/password.ts | 87 +- .../content/components/input/radius.raw.jsx | 21 + apps/docs/content/components/input/radius.ts | 28 +- .../content/components/input/readonly.raw.jsx | 14 + .../docs/content/components/input/readonly.ts | 15 +- .../components/input/regex-validation.raw.jsx | 27 + .../components/input/regex-validation.ts | 28 +- .../content/components/input/required.raw.jsx | 13 + .../docs/content/components/input/required.ts | 14 +- .../content/components/input/sizes.raw.jsx | 16 + apps/docs/content/components/input/sizes.ts | 18 +- .../input/start-end-content.raw.jsx | 152 + .../components/input/start-end-content.ts | 153 +- .../content/components/input/usage.raw.jsx | 10 + apps/docs/content/components/input/usage.ts | 11 +- .../content/components/input/variants.raw.jsx | 16 + .../docs/content/components/input/variants.ts | 17 +- apps/docs/content/components/kbd/keys.raw.jsx | 11 + apps/docs/content/components/kbd/keys.ts | 12 +- .../docs/content/components/kbd/usage.raw.jsx | 5 + apps/docs/content/components/kbd/usage.ts | 8 +- .../content/components/link/block.raw.jsx | 26 + apps/docs/content/components/link/block.ts | 27 +- .../content/components/link/colors.raw.jsx | 26 + apps/docs/content/components/link/colors.ts | 15 +- .../link/custom-anchor-icon.raw.jsx | 37 + .../components/link/custom-anchor-icon.ts | 38 +- .../components/link/custom-impl.raw.jsx | 30 + .../components/link/custom-impl.raw.tsx | 32 + .../content/components/link/custom-impl.ts | 67 +- .../content/components/link/disabled.raw.jsx | 9 + apps/docs/content/components/link/disabled.ts | 8 +- .../content/components/link/external.raw.jsx | 14 + apps/docs/content/components/link/external.ts | 19 +- .../content/components/link/nextjs.raw.jsx | 10 + apps/docs/content/components/link/nextjs.ts | 11 +- .../components/link/polymorphic.raw.jsx | 15 + .../content/components/link/polymorphic.ts | 16 +- .../content/components/link/sizes.raw.jsx | 17 + apps/docs/content/components/link/sizes.ts | 12 +- .../content/components/link/underline.raw.jsx | 23 + .../docs/content/components/link/underline.ts | 14 +- .../content/components/link/usage.raw.jsx | 5 + apps/docs/content/components/link/usage.ts | 8 +- .../components/listbox/custom-styles.raw.jsx | 269 ++ .../components/listbox/custom-styles.ts | 277 +- .../components/listbox/description.raw.jsx | 159 + .../content/components/listbox/description.ts | 162 +- .../components/listbox/disabled-keys.raw.jsx | 26 + .../components/listbox/disabled-keys.ts | 29 +- .../components/listbox/dynamic.raw.jsx | 44 + .../content/components/listbox/dynamic.ts | 51 +- .../content/components/listbox/icons.raw.jsx | 149 + apps/docs/content/components/listbox/icons.ts | 158 +- .../listbox/multiple-selection.raw.jsx | 35 + .../components/listbox/multiple-selection.ts | 41 +- .../components/listbox/sections.raw.jsx | 162 + .../content/components/listbox/sections.ts | 165 +- .../listbox/single-selection.raw.jsx | 34 + .../components/listbox/single-selection.ts | 41 +- .../components/listbox/top-content.raw.jsx | 264 ++ .../components/listbox/top-content.raw.tsx | 267 ++ .../content/components/listbox/top-content.ts | 336 +- .../content/components/listbox/usage.raw.jsx | 22 + apps/docs/content/components/listbox/usage.ts | 28 +- .../components/listbox/variants.raw.jsx | 58 + .../content/components/listbox/variants.ts | 65 +- .../content/components/modal/backdrop.raw.jsx | 75 + .../docs/content/components/modal/backdrop.ts | 68 +- .../components/modal/custom-backdrop.raw.jsx | 62 + .../components/modal/custom-backdrop.ts | 55 +- .../components/modal/custom-motion.raw.jsx | 79 + .../content/components/modal/custom-motion.ts | 72 +- .../components/modal/custom-styles.raw.jsx | 70 + .../content/components/modal/custom-styles.ts | 61 +- .../modal/draggable-overflow.raw.jsx | 48 + .../components/modal/draggable-overflow.ts | 38 +- .../components/modal/draggable.raw.jsx | 48 + .../content/components/modal/draggable.ts | 38 +- .../content/components/modal/form.raw.jsx | 116 + apps/docs/content/components/modal/form.ts | 110 +- .../components/modal/non-dismissable.raw.jsx | 60 + .../components/modal/non-dismissable.ts | 48 +- .../content/components/modal/overflow.raw.jsx | 112 + .../content/components/modal/overflow.raw.tsx | 115 + .../docs/content/components/modal/overflow.ts | 243 +- .../components/modal/placement.raw.jsx | 114 + .../content/components/modal/placement.ts | 59 +- .../content/components/modal/sizes.raw.jsx | 67 + apps/docs/content/components/modal/sizes.ts | 63 +- .../content/components/modal/usage.raw.jsx | 55 + apps/docs/content/components/modal/usage.ts | 48 +- .../components/navbar/bordered.raw.jsx | 52 + .../content/components/navbar/bordered.ts | 53 +- .../components/navbar/controlled-menu.raw.jsx | 106 + .../components/navbar/controlled-menu.ts | 101 +- .../navbar/custom-active-item.raw.jsx | 69 + .../components/navbar/custom-active-item.ts | 70 +- .../navbar/disable-menu-animation.raw.jsx | 104 + .../navbar/disable-menu-animation.ts | 95 +- .../components/navbar/disabled-blur.raw.jsx | 52 + .../components/navbar/disabled-blur.ts | 53 +- .../components/navbar/hide-on-scroll.raw.jsx | 52 + .../components/navbar/hide-on-scroll.ts | 53 +- .../content/components/navbar/static.raw.jsx | 52 + apps/docs/content/components/navbar/static.ts | 53 +- .../content/components/navbar/usage.raw.jsx | 52 + apps/docs/content/components/navbar/usage.ts | 53 +- .../components/navbar/with-avatar.raw.jsx | 85 + .../content/components/navbar/with-avatar.ts | 75 +- .../navbar/with-dropdown-menu.raw.jsx | 320 ++ .../components/navbar/with-dropdown-menu.ts | 337 +- .../components/navbar/with-menu.raw.jsx | 100 + .../content/components/navbar/with-menu.ts | 91 +- .../navbar/with-search-input.raw.jsx | 130 + .../components/navbar/with-search-input.ts | 125 +- .../components/pagination/boundaries.raw.jsx | 14 + .../components/pagination/boundaries.ts | 26 +- .../components/pagination/colors.raw.jsx | 13 + .../content/components/pagination/colors.ts | 15 +- .../components/pagination/compact.raw.jsx | 5 + .../content/components/pagination/compact.ts | 8 +- .../components/pagination/controlled.raw.jsx | 30 + .../components/pagination/controlled.ts | 36 +- .../components/pagination/controls.raw.jsx | 5 + .../content/components/pagination/controls.ts | 8 +- .../components/pagination/custom-impl.raw.jsx | 82 + .../components/pagination/custom-impl.ts | 90 +- .../pagination/custom-items.raw.jsx | 88 + .../pagination/custom-items.raw.tsx | 100 + .../components/pagination/custom-items.ts | 181 +- .../pagination/custom-styles.raw.jsx | 15 + .../components/pagination/custom-styles.ts | 16 +- .../components/pagination/disabled.raw.jsx | 5 + .../content/components/pagination/disabled.ts | 8 +- .../pagination/initial-page.raw.jsx | 5 + .../components/pagination/initial-page.ts | 8 +- .../components/pagination/loop.raw.jsx | 5 + .../content/components/pagination/loop.ts | 8 +- .../components/pagination/radius.raw.jsx | 13 + .../content/components/pagination/radius.ts | 15 +- .../components/pagination/shadow.raw.jsx | 5 + .../content/components/pagination/shadow.ts | 8 +- .../components/pagination/siblings.raw.jsx | 14 + .../content/components/pagination/siblings.ts | 23 +- .../components/pagination/sizes.raw.jsx | 13 + .../content/components/pagination/sizes.ts | 15 +- .../components/pagination/usage.raw.jsx | 5 + .../content/components/pagination/usage.ts | 8 +- .../components/pagination/variants.raw.jsx | 13 + .../content/components/pagination/variants.ts | 15 +- .../content/components/popover/arrow.raw.jsx | 17 + apps/docs/content/components/popover/arrow.ts | 18 +- .../components/popover/backdrop.raw.jsx | 38 + .../content/components/popover/backdrop.ts | 46 +- .../content/components/popover/colors.raw.jsx | 29 + .../docs/content/components/popover/colors.ts | 38 +- .../components/popover/controlled.raw.jsx | 22 + .../content/components/popover/controlled.ts | 23 +- .../components/popover/custom-motion.raw.jsx | 45 + .../components/popover/custom-motion.ts | 46 +- .../components/popover/custom-styles.raw.jsx | 36 + .../components/popover/custom-styles.ts | 37 +- .../components/popover/custom-trigger.raw.jsx | 85 + .../components/popover/custom-trigger.ts | 73 +- .../content/components/popover/offset.raw.jsx | 17 + .../docs/content/components/popover/offset.ts | 18 +- .../components/popover/placements.raw.jsx | 42 + .../content/components/popover/placements.ts | 43 +- .../components/popover/title-props.raw.jsx | 21 + .../content/components/popover/title-props.ts | 22 +- .../content/components/popover/usage.raw.jsx | 17 + apps/docs/content/components/popover/usage.ts | 18 +- .../components/popover/variants.raw.jsx | 29 + .../content/components/popover/variants.ts | 30 +- .../components/popover/with-form.raw.jsx | 26 + .../content/components/popover/with-form.ts | 27 +- .../components/progress/colors.raw.jsx | 14 + .../content/components/progress/colors.ts | 15 +- .../components/progress/custom-styles.raw.jsx | 20 + .../components/progress/custom-styles.ts | 21 +- .../components/progress/indeterminate.raw.jsx | 5 + .../components/progress/indeterminate.ts | 13 +- .../content/components/progress/label.raw.jsx | 5 + .../docs/content/components/progress/label.ts | 8 +- .../content/components/progress/sizes.raw.jsx | 11 + .../docs/content/components/progress/sizes.ts | 12 +- .../components/progress/striped.raw.jsx | 7 + .../content/components/progress/striped.ts | 15 +- .../content/components/progress/usage.raw.jsx | 5 + .../docs/content/components/progress/usage.ts | 8 +- .../progress/value-formatting.raw.jsx | 16 + .../components/progress/value-formatting.ts | 17 +- .../content/components/progress/value.raw.jsx | 24 + .../docs/content/components/progress/value.ts | 25 +- .../components/radio-group/controlled.raw.jsx | 18 + .../components/radio-group/controlled.ts | 23 +- .../radio-group/custom-impl.raw.jsx | 55 + .../radio-group/custom-impl.raw.tsx | 56 + .../components/radio-group/custom-impl.ts | 121 +- .../radio-group/custom-styles.raw.jsx | 36 + .../components/radio-group/custom-styles.ts | 40 +- .../radio-group/default-value.raw.jsx | 13 + .../components/radio-group/default-value.ts | 18 +- .../components/radio-group/disabled.raw.jsx | 13 + .../components/radio-group/disabled.ts | 17 +- .../components/radio-group/horizontal.raw.jsx | 13 + .../components/radio-group/horizontal.ts | 17 +- .../components/radio-group/invalid.raw.jsx | 27 + .../content/components/radio-group/invalid.ts | 28 +- .../components/radio-group/usage.raw.jsx | 13 + .../content/components/radio-group/usage.ts | 16 +- .../radio-group/with-description.raw.jsx | 20 + .../radio-group/with-description.ts | 24 +- .../controlled-focused-value.raw.jsx | 15 + .../controlled-focused-value.ts | 16 +- .../range-calendar/controlled.raw.jsx | 11 + .../range-calendar/controlled.raw.tsx | 15 + .../components/range-calendar/controlled.ts | 43 +- .../range-calendar/disabled.raw.jsx | 5 + .../components/range-calendar/disabled.ts | 8 +- .../international-calendars.raw.jsx | 10 + .../range-calendar/international-calendars.ts | 11 +- .../range-calendar/invalid-date.raw.jsx | 22 + .../range-calendar/invalid-date.raw.tsx | 26 + .../components/range-calendar/invalid-date.ts | 55 +- .../range-calendar/max-date-value.raw.jsx | 6 + .../range-calendar/max-date-value.ts | 12 +- .../range-calendar/min-date-value.raw.jsx | 6 + .../range-calendar/min-date-value.ts | 12 +- .../non-contiguous-ranges.raw.jsx | 15 + .../range-calendar/non-contiguous-ranges.ts | 16 +- .../range-calendar/page-behaviour.raw.jsx | 5 + .../range-calendar/page-behaviour.ts | 11 +- .../components/range-calendar/presets.raw.jsx | 116 + .../components/range-calendar/presets.raw.tsx | 125 + .../components/range-calendar/presets.ts | 237 +- .../range-calendar/read-only.raw.jsx | 15 + .../components/range-calendar/read-only.ts | 16 +- .../range-calendar/unavailable-dates.raw.jsx | 23 + .../range-calendar/unavailable-dates.ts | 30 +- .../components/range-calendar/usage.raw.jsx | 17 + .../components/range-calendar/usage.ts | 18 +- .../range-calendar/visible-months.raw.jsx | 5 + .../range-calendar/visible-months.ts | 11 +- .../with-month-and-year-picker.raw.jsx | 5 + .../with-month-and-year-picker.ts | 11 +- .../scroll-shadow/custom-size.raw.jsx | 74 + .../components/scroll-shadow/custom-size.ts | 47 +- .../scroll-shadow/hide-scrollbar.raw.jsx | 74 + .../scroll-shadow/hide-scrollbar.ts | 47 +- .../scroll-shadow/horizontal.raw.jsx | 74 + .../components/scroll-shadow/horizontal.ts | 47 +- .../components/scroll-shadow/offset.raw.jsx | 79 + .../components/scroll-shadow/offset.ts | 52 +- .../components/scroll-shadow/usage.raw.jsx | 74 + .../content/components/scroll-shadow/usage.ts | 47 +- .../select/async-loading-items.raw.jsx | 98 + .../select/async-loading-items.raw.tsx | 109 + .../components/select/async-loading-items.ts | 178 +- .../content/components/select/colors.raw.jsx | 40 + apps/docs/content/components/select/colors.ts | 52 +- .../components/select/custom-items.raw.jsx | 228 ++ .../content/components/select/custom-items.ts | 231 +- .../select/custom-render-value.raw.jsx | 247 ++ .../select/custom-render-value.raw.tsx | 259 ++ .../components/select/custom-render-value.ts | 309 +- .../select/custom-sections-style.raw.jsx | 48 + .../select/custom-sections-style.ts | 48 +- .../select/custom-selector-icon.raw.jsx | 57 + .../components/select/custom-selector-icon.ts | 62 +- .../components/select/custom-styles.raw.jsx | 269 ++ .../components/select/custom-styles.ts | 272 +- .../components/select/description.raw.jsx | 33 + .../content/components/select/description.ts | 38 +- .../components/select/disabled-items.raw.jsx | 32 + .../components/select/disabled-items.ts | 37 +- .../components/select/disabled.raw.jsx | 33 + .../content/components/select/disabled.ts | 38 +- .../content/components/select/dynamic.raw.jsx | 30 + .../docs/content/components/select/dynamic.ts | 33 +- .../components/select/error-message.raw.jsx | 43 + .../components/select/error-message.ts | 48 +- .../select/item-start-content.raw.jsx | 68 + .../components/select/item-start-content.ts | 68 +- .../select/label-placements.raw.jsx | 61 + .../components/select/label-placements.ts | 70 +- .../components/select/multiple-chips.raw.jsx | 243 ++ .../components/select/multiple-chips.raw.tsx | 255 ++ .../components/select/multiple-chips.ts | 301 +- .../multiple-controlled-onchange.raw.jsx | 43 + .../multiple-controlled-onchange.raw.tsx | 46 + .../select/multiple-controlled-onchange.ts | 81 +- .../select/multiple-controlled.raw.jsx | 39 + .../select/multiple-controlled.raw.tsx | 42 + .../components/select/multiple-controlled.ts | 73 +- .../components/select/multiple.raw.jsx | 32 + .../content/components/select/multiple.ts | 37 +- .../components/select/open-state.raw.jsx | 41 + .../content/components/select/open-state.ts | 46 +- .../content/components/select/radius.raw.jsx | 40 + apps/docs/content/components/select/radius.ts | 51 +- .../components/select/required.raw.jsx | 33 + .../content/components/select/required.ts | 38 +- .../components/select/sections.raw.jsx | 28 + .../content/components/select/sections.ts | 33 +- .../select/single-controlled-onchange.raw.jsx | 43 + .../select/single-controlled-onchange.raw.tsx | 44 + .../select/single-controlled-onchange.ts | 81 +- .../select/single-controlled.raw.jsx | 39 + .../select/single-controlled.raw.tsx | 42 + .../components/select/single-controlled.ts | 73 +- .../content/components/select/sizes.raw.jsx | 45 + apps/docs/content/components/select/sizes.ts | 56 +- .../components/select/start-content.raw.jsx | 69 + .../components/select/start-content.ts | 73 +- .../content/components/select/usage.raw.jsx | 34 + apps/docs/content/components/select/usage.ts | 48 +- .../components/select/variants.raw.jsx | 45 + .../content/components/select/variants.ts | 56 +- .../select/without-scroll-shadow.raw.jsx | 35 + .../select/without-scroll-shadow.ts | 40 +- .../components/skeleton/loaded.raw.jsx | 33 + .../content/components/skeleton/loaded.ts | 34 +- .../components/skeleton/standalone.raw.jsx | 15 + .../content/components/skeleton/standalone.ts | 16 +- .../content/components/skeleton/usage.raw.jsx | 22 + .../docs/content/components/skeleton/usage.ts | 23 +- .../content/components/slider/colors.raw.jsx | 22 + apps/docs/content/components/slider/colors.ts | 30 +- .../slider/controlled-change-end.raw.jsx | 18 + .../slider/controlled-change-end.raw.tsx | 22 + .../slider/controlled-change-end.ts | 40 +- .../slider/controlled-range.raw.jsx | 23 + .../slider/controlled-range.raw.tsx | 26 + .../components/slider/controlled-range.ts | 49 +- .../components/slider/controlled.raw.jsx | 91 + .../components/slider/controlled.raw.tsx | 94 + .../content/components/slider/controlled.ts | 135 +- .../components/slider/custom-styles.raw.jsx | 47 + .../components/slider/custom-styles.ts | 48 +- .../slider/disable-thumb-scale.raw.jsx | 41 + .../components/slider/disable-thumb-scale.ts | 42 +- .../components/slider/disabled.raw.jsx | 15 + .../content/components/slider/disabled.ts | 16 +- .../components/slider/fill-offset.raw.jsx | 18 + .../content/components/slider/fill-offset.ts | 19 +- .../components/slider/get-value.raw.jsx | 13 + .../content/components/slider/get-value.ts | 14 +- .../components/slider/hide-thumb.raw.jsx | 13 + .../content/components/slider/hide-thumb.ts | 14 +- .../components/slider/hide-value.raw.jsx | 16 + .../content/components/slider/hide-value.ts | 17 +- .../content/components/slider/marks.raw.jsx | 28 + apps/docs/content/components/slider/marks.ts | 29 +- .../content/components/slider/outline.raw.jsx | 41 + .../docs/content/components/slider/outline.ts | 42 +- .../content/components/slider/radius.raw.jsx | 22 + apps/docs/content/components/slider/radius.ts | 29 +- .../content/components/slider/range.raw.jsx | 15 + apps/docs/content/components/slider/range.ts | 16 +- .../components/slider/render-label.raw.jsx | 84 + .../content/components/slider/render-label.ts | 86 +- .../slider/render-range-thumb.raw.jsx | 33 + .../components/slider/render-range-thumb.ts | 34 +- .../components/slider/render-thumb.raw.jsx | 24 + .../content/components/slider/render-thumb.ts | 25 +- .../components/slider/render-value.raw.jsx | 58 + .../components/slider/render-value.raw.tsx | 61 + .../content/components/slider/render-value.ts | 117 +- .../content/components/slider/sizes.raw.jsx | 35 + apps/docs/content/components/slider/sizes.ts | 36 +- .../slider/start-end-content.raw.jsx | 67 + .../components/slider/start-end-content.ts | 68 +- .../content/components/slider/tooltip.raw.jsx | 30 + .../docs/content/components/slider/tooltip.ts | 31 +- .../content/components/slider/usage.raw.jsx | 14 + apps/docs/content/components/slider/usage.ts | 15 +- .../slider/value-formatting.raw.jsx | 14 + .../components/slider/value-formatting.ts | 15 +- .../components/slider/vertical.raw.jsx | 35 + .../content/components/slider/vertical.ts | 36 +- .../components/slider/visible-steps.raw.jsx | 41 + .../components/slider/visible-steps.ts | 42 +- .../content/components/snippet/colors.raw.jsx | 14 + .../docs/content/components/snippet/colors.ts | 15 +- .../components/snippet/custom-icons.raw.jsx | 43 + .../components/snippet/custom-icons.ts | 57 +- .../components/snippet/custom-tooltip.raw.jsx | 17 + .../components/snippet/custom-tooltip.ts | 18 +- .../components/snippet/multiline.raw.jsx | 11 + .../content/components/snippet/multiline.ts | 12 +- .../content/components/snippet/sizes.raw.jsx | 11 + apps/docs/content/components/snippet/sizes.ts | 12 +- .../content/components/snippet/symbol.raw.jsx | 9 + .../docs/content/components/snippet/symbol.ts | 8 +- .../content/components/snippet/usage.raw.jsx | 5 + apps/docs/content/components/snippet/usage.ts | 8 +- .../components/snippet/variants.raw.jsx | 18 + .../content/components/snippet/variants.ts | 13 +- .../components/snippet/without-copy.raw.jsx | 9 + .../components/snippet/without-copy.ts | 10 +- .../content/components/spacer/usage.raw.jsx | 24 + apps/docs/content/components/spacer/usage.ts | 29 +- .../content/components/spinner/colors.raw.jsx | 14 + .../docs/content/components/spinner/colors.ts | 15 +- .../components/spinner/label-colors.raw.jsx | 14 + .../components/spinner/label-colors.ts | 15 +- .../content/components/spinner/label.raw.jsx | 5 + apps/docs/content/components/spinner/label.ts | 8 +- .../content/components/spinner/sizes.raw.jsx | 11 + apps/docs/content/components/spinner/sizes.ts | 12 +- .../content/components/spinner/usage.raw.jsx | 5 + apps/docs/content/components/spinner/usage.ts | 8 +- .../content/components/switch/colors.raw.jsx | 26 + apps/docs/content/components/switch/colors.ts | 15 +- .../components/switch/controlled.raw.jsx | 14 + .../content/components/switch/controlled.ts | 15 +- .../components/switch/custom-impl.raw.jsx | 71 + .../components/switch/custom-impl.raw.tsx | 72 + .../content/components/switch/custom-impl.ts | 125 +- .../components/switch/custom-styles.raw.jsx | 32 + .../components/switch/custom-styles.ts | 32 +- .../components/switch/disabled.raw.jsx | 9 + .../content/components/switch/disabled.ts | 10 +- .../content/components/switch/icons.raw.jsx | 53 + apps/docs/content/components/switch/icons.ts | 54 +- .../content/components/switch/label.raw.jsx | 5 + apps/docs/content/components/switch/label.ts | 10 +- .../content/components/switch/sizes.raw.jsx | 17 + apps/docs/content/components/switch/sizes.ts | 12 +- .../components/switch/thumb-icon.raw.jsx | 54 + .../content/components/switch/thumb-icon.ts | 59 +- .../content/components/switch/usage.raw.jsx | 5 + apps/docs/content/components/switch/usage.ts | 8 +- .../components/table/async-pagination.raw.jsx | 69 + .../components/table/async-pagination.ts | 60 +- .../table/controlled-selection.raw.jsx | 75 + .../components/table/controlled-selection.ts | 68 +- .../components/table/custom-cells.raw.jsx | 271 ++ .../components/table/custom-cells.raw.tsx | 278 ++ .../content/components/table/custom-cells.ts | 358 +- .../components/table/custom-styles.raw.jsx | 662 ++++ .../components/table/custom-styles.raw.tsx | 674 ++++ .../content/components/table/custom-styles.ts | 1030 +---- .../components/table/disabled-rows.raw.jsx | 76 + .../content/components/table/disabled-rows.ts | 69 +- .../table/disallow-empty-selection.raw.jsx | 68 + .../table/disallow-empty-selection.ts | 65 +- .../content/components/table/dynamic.raw.jsx | 68 + apps/docs/content/components/table/dynamic.ts | 61 +- .../content/components/table/empty.raw.jsx | 14 + apps/docs/content/components/table/empty.ts | 15 +- .../table/infinite-pagination.raw.jsx | 76 + .../table/infinite-pagination.raw.tsx | 87 + .../components/table/infinite-pagination.ts | 153 +- .../components/table/load-more.raw.jsx | 80 + .../content/components/table/load-more.ts | 71 +- .../table/multiple-selection.raw.jsx | 67 + .../components/table/multiple-selection.ts | 64 +- .../components/table/paginated.raw.jsx | 212 + .../content/components/table/paginated.ts | 206 +- .../components/table/row-actions.raw.jsx | 88 + .../content/components/table/row-actions.ts | 79 +- .../table/selection-behavior.raw.jsx | 87 + .../components/table/selection-behavior.ts | 78 +- .../components/table/single-selection.raw.jsx | 67 + .../components/table/single-selection.ts | 64 +- .../content/components/table/sorting.raw.jsx | 82 + apps/docs/content/components/table/sorting.ts | 73 +- .../content/components/table/striped.raw.jsx | 35 + apps/docs/content/components/table/striped.ts | 36 +- .../content/components/table/usage.raw.jsx | 35 + apps/docs/content/components/table/usage.ts | 36 +- .../content/components/table/use-case.raw.jsx | 640 ++++ .../content/components/table/use-case.raw.tsx | 653 ++++ .../docs/content/components/table/use-case.ts | 1316 +------ .../components/table/without-header.raw.jsx | 35 + .../components/table/without-header.ts | 36 +- .../components/table/without-wrapper.raw.jsx | 35 + .../components/table/without-wrapper.ts | 36 +- .../content/components/tabs/colors.raw.jsx | 17 + apps/docs/content/components/tabs/colors.ts | 25 +- .../components/tabs/controlled.raw.jsx | 38 + .../content/components/tabs/controlled.ts | 38 +- .../components/tabs/custom-styles.raw.jsx | 131 + .../content/components/tabs/custom-styles.ts | 108 +- .../components/tabs/disabled-item.raw.jsx | 36 + .../content/components/tabs/disabled-item.ts | 32 +- .../content/components/tabs/disabled.raw.jsx | 36 + apps/docs/content/components/tabs/disabled.ts | 32 +- .../content/components/tabs/dynamic.raw.jsx | 38 + apps/docs/content/components/tabs/dynamic.ts | 38 +- .../docs/content/components/tabs/form.raw.jsx | 67 + .../docs/content/components/tabs/form.raw.tsx | 68 + apps/docs/content/components/tabs/form.ts | 137 +- .../content/components/tabs/icons.raw.jsx | 112 + apps/docs/content/components/tabs/icons.ts | 95 +- .../content/components/tabs/placement.raw.jsx | 51 + .../docs/content/components/tabs/placement.ts | 46 +- .../content/components/tabs/radius.raw.jsx | 17 + apps/docs/content/components/tabs/radius.ts | 24 +- .../content/components/tabs/sizes.raw.jsx | 17 + apps/docs/content/components/tabs/sizes.ts | 22 +- .../content/components/tabs/usage.raw.jsx | 36 + apps/docs/content/components/tabs/usage.ts | 32 +- .../content/components/tabs/variants.raw.jsx | 17 + apps/docs/content/components/tabs/variants.ts | 23 +- .../content/components/tabs/vertical.raw.jsx | 43 + apps/docs/content/components/tabs/vertical.ts | 38 +- .../components/textarea/autosize.raw.jsx | 11 + .../content/components/textarea/autosize.ts | 23 +- .../components/textarea/clear-button.raw.jsx | 16 + .../components/textarea/clear-button.ts | 9 + .../components/textarea/controlled.raw.jsx | 19 + .../content/components/textarea/controlled.ts | 20 +- .../components/textarea/description.raw.jsx | 13 + .../components/textarea/description.ts | 14 +- .../textarea/disable-autosize.raw.jsx | 17 + .../components/textarea/disable-autosize.ts | 18 +- .../components/textarea/disabled.raw.jsx | 14 + .../content/components/textarea/disabled.ts | 15 +- .../components/textarea/error-message.raw.jsx | 15 + .../components/textarea/error-message.ts | 16 +- .../docs/content/components/textarea/index.ts | 2 + .../components/textarea/readonly.raw.jsx | 15 + .../content/components/textarea/readonly.ts | 16 +- .../components/textarea/required.raw.jsx | 13 + .../content/components/textarea/required.ts | 14 +- .../content/components/textarea/usage.raw.jsx | 5 + .../docs/content/components/textarea/usage.ts | 12 +- .../components/textarea/variants.raw.jsx | 20 + .../content/components/textarea/variants.ts | 21 +- .../components/time-input/controlled.raw.jsx | 26 + .../components/time-input/controlled.raw.tsx | 31 + .../components/time-input/controlled.ts | 60 +- .../components/time-input/disabled.raw.jsx | 6 + .../content/components/time-input/disabled.ts | 13 +- .../components/time-input/end-content.raw.jsx | 35 + .../components/time-input/end-content.ts | 36 +- .../time-input/error-message-function.raw.jsx | 15 + .../time-input/error-message-function.ts | 16 +- .../time-input/error-message.raw.jsx | 5 + .../components/time-input/error-message.ts | 12 +- .../components/time-input/granularity.raw.jsx | 14 + .../components/time-input/granularity.raw.tsx | 19 + .../components/time-input/granularity.ts | 36 +- .../time-input/hide-timezone.raw.jsx | 12 + .../components/time-input/hide-timezone.ts | 13 +- .../components/time-input/hour-cycle.raw.jsx | 13 + .../components/time-input/hour-cycle.ts | 14 +- .../time-input/label-placement.raw.jsx | 27 + .../components/time-input/label-placement.ts | 28 +- .../time-input/max-time-value.raw.jsx | 6 + .../components/time-input/max-time-value.ts | 12 +- .../time-input/min-time-value.raw.jsx | 6 + .../components/time-input/min-time-value.ts | 12 +- .../time-input/placeholder-value.raw.jsx | 6 + .../time-input/placeholder-value.ts | 12 +- .../components/time-input/read-only.raw.jsx | 6 + .../components/time-input/read-only.ts | 13 +- .../components/time-input/required.raw.jsx | 5 + .../content/components/time-input/required.ts | 11 +- .../time-input/start-content.raw.jsx | 35 + .../components/time-input/start-content.ts | 36 +- .../components/time-input/timezones.raw.jsx | 17 + .../components/time-input/timezones.ts | 18 +- .../components/time-input/usage.raw.jsx | 11 + .../content/components/time-input/usage.ts | 12 +- .../time-input/with-description.raw.jsx | 5 + .../components/time-input/with-description.ts | 11 +- .../time-input/without-label.raw.jsx | 6 + .../components/time-input/without-label.ts | 9 +- .../content/components/tooltip/arrow.raw.jsx | 9 + apps/docs/content/components/tooltip/arrow.ts | 10 +- .../content/components/tooltip/colors.raw.jsx | 19 + .../docs/content/components/tooltip/colors.ts | 28 +- .../components/tooltip/controlled.raw.jsx | 14 + .../content/components/tooltip/controlled.ts | 21 +- .../components/tooltip/custom-content.raw.jsx | 16 + .../components/tooltip/custom-content.ts | 19 +- .../components/tooltip/custom-motion.raw.jsx | 31 + .../components/tooltip/custom-motion.ts | 32 +- .../components/tooltip/custom-styles.raw.jsx | 20 + .../components/tooltip/custom-styles.ts | 24 +- .../components/tooltip/delay-multiple.raw.jsx | 18 + .../components/tooltip/delay-multiple.ts | 19 +- .../content/components/tooltip/delay.raw.jsx | 18 + apps/docs/content/components/tooltip/delay.ts | 19 +- .../content/components/tooltip/offset.raw.jsx | 23 + .../docs/content/components/tooltip/offset.ts | 24 +- .../components/tooltip/placements.raw.jsx | 30 + .../content/components/tooltip/placements.ts | 36 +- .../content/components/tooltip/usage.raw.jsx | 9 + apps/docs/content/components/tooltip/usage.ts | 10 +- .../components/user/link-description.raw.jsx | 17 + .../components/user/link-description.ts | 18 +- .../content/components/user/usage.raw.jsx | 13 + apps/docs/content/components/user/usage.ts | 14 +- .../content/docs/api-references/cli-api.mdx | 191 +- .../docs/api-references/nextui-provider.mdx | 21 +- apps/docs/content/docs/components/alert.mdx | 34 +- .../content/docs/components/autocomplete.mdx | 180 +- .../content/docs/components/date-input.mdx | 36 +- .../content/docs/components/date-picker.mdx | 36 +- .../docs/components/date-range-picker.mdx | 42 +- apps/docs/content/docs/components/drawer.mdx | 29 +- .../docs/content/docs/components/dropdown.mdx | 38 +- .../content/docs/components/input-otp.mdx | 228 ++ apps/docs/content/docs/components/listbox.mdx | 23 +- apps/docs/content/docs/components/modal.mdx | 20 +- apps/docs/content/docs/components/navbar.mdx | 31 +- .../docs/components/range-calendar.mdx | 6 +- apps/docs/content/docs/components/select.mdx | 14 +- apps/docs/content/docs/components/switch.mdx | 2 +- apps/docs/content/docs/components/table.mdx | 27 +- .../docs/content/docs/components/textarea.mdx | 10 + apps/docs/global.d.ts | 5 + apps/docs/package.json | 28 +- apps/docs/public/sitemap-0.xml | 65 - apps/docs/scripts/update-github-info.ts | 61 + apps/docs/styles/globals.css | 60 + apps/docs/styles/sandpack.css | 16 + apps/docs/tsconfig.json | 18 +- apps/docs/utils/number.ts | 25 + package.json | 8 +- packages/components/accordion/CHANGELOG.md | 193 + packages/components/accordion/package.json | 26 +- packages/components/alert/CHANGELOG.md | 161 + packages/components/alert/package.json | 14 +- packages/components/alert/src/alert.tsx | 16 +- packages/components/alert/src/use-alert.ts | 29 +- .../alert/stories/alert.stories.tsx | 140 +- packages/components/autocomplete/CHANGELOG.md | 296 ++ .../__tests__/autocomplete.test.tsx | 250 +- packages/components/autocomplete/package.json | 35 +- .../autocomplete/src/use-autocomplete.ts | 46 +- .../stories/autocomplete.stories.tsx | 126 + packages/components/avatar/CHANGELOG.md | 127 + packages/components/avatar/package.json | 16 +- packages/components/badge/CHANGELOG.md | 92 + packages/components/badge/package.json | 10 +- packages/components/breadcrumbs/CHANGELOG.md | 119 + packages/components/breadcrumbs/package.json | 20 +- packages/components/button/CHANGELOG.md | 141 + packages/components/button/package.json | 25 +- packages/components/calendar/CHANGELOG.md | 195 + packages/components/calendar/package.json | 37 +- .../calendar/src/calendar-month.tsx | 5 +- .../calendar/src/calendar-picker.tsx | 4 +- .../calendar/stories/calendar.stories.tsx | 39 +- .../stories/range-calendar.stories.tsx | 2 +- packages/components/card/CHANGELOG.md | 130 + packages/components/card/package.json | 23 +- packages/components/checkbox/CHANGELOG.md | 114 + .../__tests__/checkbox-group.test.tsx | 84 + packages/components/checkbox/package.json | 31 +- .../checkbox/src/checkbox-group.tsx | 7 +- .../checkbox/src/use-checkbox-group.ts | 8 +- .../components/checkbox/src/use-checkbox.ts | 6 +- .../stories/checkbox-group.stories.tsx | 45 +- .../checkbox/stories/checkbox.stories.tsx | 2 +- packages/components/chip/CHANGELOG.md | 119 + packages/components/chip/package.json | 18 +- packages/components/code/CHANGELOG.md | 107 + packages/components/code/package.json | 8 +- packages/components/date-input/CHANGELOG.md | 102 + packages/components/date-input/package.json | 27 +- .../date-input/src/use-date-input.ts | 4 +- .../date-input/src/use-time-input.ts | 4 +- packages/components/date-picker/CHANGELOG.md | 229 ++ .../__tests__/date-picker.test.tsx | 220 +- packages/components/date-picker/package.json | 31 +- .../date-picker/src/use-date-picker.ts | 7 +- .../date-picker/src/use-date-range-picker.ts | 7 +- .../stories/date-picker.stories.tsx | 31 + .../stories/date-range-picker.stories.tsx | 32 + packages/components/divider/CHANGELOG.md | 106 + packages/components/divider/package.json | 10 +- packages/components/drawer/CHANGELOG.md | 158 + packages/components/drawer/package.json | 13 +- packages/components/drawer/src/use-drawer.ts | 14 +- .../drawer/stories/drawer.stories.tsx | 339 ++ packages/components/dropdown/CHANGELOG.md | 173 + .../dropdown/__tests__/dropdown.test.tsx | 8 +- packages/components/dropdown/package.json | 24 +- .../components/dropdown/src/use-dropdown.ts | 18 +- packages/components/form/CHANGELOG.md | 17 + packages/components/form/README.md | 24 + packages/components/form/package.json | 57 + packages/components/form/src/base-form.tsx | 47 + packages/components/form/src/form.tsx | 11 + packages/components/form/src/index.ts | 11 + packages/components/form/src/utils.ts | 106 + .../components/form/stories/form.stories.tsx | 76 + packages/components/form/tsconfig.json | 10 + packages/components/form/tsup.config.ts | 8 + packages/components/image/CHANGELOG.md | 123 + packages/components/image/package.json | 10 +- packages/components/input-otp/CHANGELOG.md | 10 + packages/components/input-otp/README.md | 26 + .../input-otp/__tests__/input-otp.test.tsx | 238 ++ packages/components/input-otp/package.json | 63 + packages/components/input-otp/src/index.ts | 13 + .../input-otp/src/input-otp-context.ts | 9 + .../input-otp/src/input-otp-segment.tsx | 45 + .../components/input-otp/src/input-otp.tsx | 80 + .../components/input-otp/src/use-input-otp.ts | 333 ++ .../input-otp/stories/input-otp.stories.tsx | 317 ++ packages/components/input-otp/tsconfig.json | 10 + packages/components/input-otp/tsup.config.ts | 8 + packages/components/input/CHANGELOG.md | 139 + .../components/input/__tests__/input.test.tsx | 199 +- .../input/__tests__/textarea.test.tsx | 81 + packages/components/input/package.json | 29 +- packages/components/input/src/input.tsx | 11 +- packages/components/input/src/textarea.tsx | 29 +- packages/components/input/src/use-input.ts | 12 +- .../input/stories/input.stories.tsx | 32 + .../input/stories/textarea.stories.tsx | 44 + packages/components/kbd/CHANGELOG.md | 109 + packages/components/kbd/package.json | 10 +- packages/components/link/CHANGELOG.md | 130 + packages/components/link/package.json | 18 +- packages/components/listbox/CHANGELOG.md | 173 + .../listbox/__tests__/listbox.test.tsx | 60 + packages/components/listbox/package.json | 41 +- .../components/listbox/src/listbox-item.tsx | 28 +- packages/components/listbox/src/listbox.tsx | 25 +- .../listbox/src/use-listbox-item.ts | 14 +- .../listbox/src/virtualized-listbox.tsx | 159 + packages/components/menu/CHANGELOG.md | 175 + .../components/menu/__tests__/menu.test.tsx | 107 + packages/components/menu/package.json | 26 +- packages/components/menu/src/menu-item.tsx | 31 +- packages/components/menu/src/menu.tsx | 12 +- packages/components/menu/src/use-menu-item.ts | 14 +- packages/components/modal/CHANGELOG.md | 200 + packages/components/modal/package.json | 26 +- packages/components/modal/src/use-modal.ts | 2 +- packages/components/navbar/CHANGELOG.md | 153 + packages/components/navbar/package.json | 25 +- packages/components/pagination/CHANGELOG.md | 133 + .../pagination/__tests__/pagination.test.tsx | 21 +- packages/components/pagination/package.json | 18 +- .../pagination/src/pagination-item.tsx | 9 +- .../pagination/src/use-pagination-item.ts | 11 +- packages/components/popover/CHANGELOG.md | 183 + packages/components/popover/package.json | 28 +- .../popover/src/popover-trigger.tsx | 8 +- packages/components/progress/CHANGELOG.md | 104 + packages/components/progress/package.json | 18 +- packages/components/radio/CHANGELOG.md | 102 + .../components/radio/__tests__/radio.test.tsx | 75 + packages/components/radio/package.json | 29 +- .../components/radio/src/use-radio-group.ts | 4 +- .../radio/stories/radio.stories.tsx | 42 +- packages/components/ripple/CHANGELOG.md | 104 + packages/components/ripple/package.json | 12 +- .../components/scroll-shadow/CHANGELOG.md | 101 + .../components/scroll-shadow/package.json | 10 +- packages/components/select/CHANGELOG.md | 283 ++ .../select/__tests__/select.test.tsx | 39 +- packages/components/select/package.json | 28 +- packages/components/select/src/select.tsx | 11 +- packages/components/select/src/use-select.ts | 4 +- .../select/stories/select.stories.tsx | 37 + packages/components/skeleton/CHANGELOG.md | 92 + packages/components/skeleton/package.json | 10 +- packages/components/slider/CHANGELOG.md | 124 + packages/components/slider/package.json | 24 +- packages/components/snippet/CHANGELOG.md | 172 + packages/components/snippet/package.json | 19 +- packages/components/spacer/CHANGELOG.md | 107 + packages/components/spacer/package.json | 8 +- packages/components/spinner/CHANGELOG.md | 107 + packages/components/spinner/package.json | 8 +- packages/components/switch/CHANGELOG.md | 104 + packages/components/switch/package.json | 24 +- packages/components/table/CHANGELOG.md | 155 + .../components/table/__tests__/table.test.tsx | 39 +- packages/components/table/package.json | 30 +- packages/components/table/src/use-table.ts | 10 + packages/components/tabs/CHANGELOG.md | 156 + packages/components/tabs/package.json | 26 +- packages/components/tabs/src/tab-panel.tsx | 5 +- packages/components/tooltip/CHANGELOG.md | 154 + packages/components/tooltip/package.json | 26 +- packages/components/user/CHANGELOG.md | 131 + packages/components/user/package.json | 14 +- packages/core/react/CHANGELOG.md | 1166 ++++++ packages/core/react/package.json | 17 +- packages/core/react/src/index.ts | 4 +- packages/core/react/src/scripts/postbuild.js | 19 - packages/core/react/tsup.config.ts | 1 + packages/core/system-rsc/CHANGELOG.md | 59 + packages/core/system-rsc/package.json | 8 +- packages/core/system/CHANGELOG.md | 116 + packages/core/system/package.json | 22 +- packages/core/system/src/provider.tsx | 19 +- packages/core/theme/CHANGELOG.md | 171 + packages/core/theme/package.json | 2 +- packages/core/theme/src/components/alert.ts | 182 +- .../core/theme/src/components/autocomplete.ts | 2 +- .../theme/src/components/circular-progress.ts | 109 - .../core/theme/src/components/date-input.ts | 3 +- packages/core/theme/src/components/index.ts | 2 +- .../core/theme/src/components/input-otp.ts | 453 +++ packages/core/theme/src/components/input.ts | 58 +- packages/core/theme/src/components/menu.ts | 13 +- .../core/theme/src/components/progress.ts | 105 +- packages/core/theme/src/components/select.ts | 25 +- packages/core/theme/src/components/table.ts | 42 +- packages/core/theme/src/utils/index.ts | 1 + .../core/theme/src/utils/merge-classes.ts | 26 + .../use-aria-accordion-item/CHANGELOG.md | 54 + .../use-aria-accordion-item/package.json | 14 +- .../hooks/use-aria-accordion/CHANGELOG.md | 54 + .../hooks/use-aria-accordion/package.json | 20 +- packages/hooks/use-aria-button/CHANGELOG.md | 54 + packages/hooks/use-aria-button/package.json | 16 +- packages/hooks/use-aria-link/CHANGELOG.md | 54 + packages/hooks/use-aria-link/package.json | 16 +- packages/hooks/use-aria-menu/CHANGELOG.md | 54 + packages/hooks/use-aria-menu/package.json | 24 +- .../hooks/use-aria-modal-overlay/CHANGELOG.md | 54 + .../hooks/use-aria-modal-overlay/package.json | 14 +- .../hooks/use-aria-multiselect/CHANGELOG.md | 54 + .../hooks/use-aria-multiselect/package.json | 34 +- .../hooks/use-aria-toggle-button/CHANGELOG.md | 83 + .../hooks/use-aria-toggle-button/package.json | 12 +- packages/hooks/use-callback-ref/CHANGELOG.md | 54 + packages/hooks/use-callback-ref/package.json | 4 +- packages/hooks/use-clipboard/CHANGELOG.md | 42 + packages/hooks/use-clipboard/package.json | 4 +- .../use-data-scroll-overflow/CHANGELOG.md | 77 + .../use-data-scroll-overflow/package.json | 4 +- packages/hooks/use-disclosure/CHANGELOG.md | 72 + packages/hooks/use-disclosure/package.json | 8 +- packages/hooks/use-draggable/CHANGELOG.md | 49 + packages/hooks/use-draggable/package.json | 6 +- packages/hooks/use-image/CHANGELOG.md | 84 + packages/hooks/use-image/package.json | 7 +- packages/hooks/use-image/src/index.ts | 150 + .../hooks/use-infinite-scroll/CHANGELOG.md | 81 + .../hooks/use-infinite-scroll/package.json | 4 +- .../use-intersection-observer/CHANGELOG.md | 54 + .../use-intersection-observer/package.json | 12 +- packages/hooks/use-is-mobile/CHANGELOG.md | 54 + packages/hooks/use-is-mobile/package.json | 6 +- packages/hooks/use-is-mounted/CHANGELOG.md | 36 + packages/hooks/use-is-mounted/package.json | 4 +- packages/hooks/use-measure/CHANGELOG.md | 36 + packages/hooks/use-measure/package.json | 4 +- packages/hooks/use-pagination/CHANGELOG.md | 87 + packages/hooks/use-pagination/package.json | 6 +- packages/hooks/use-real-shape/CHANGELOG.md | 77 + packages/hooks/use-real-shape/package.json | 4 +- packages/hooks/use-ref-state/CHANGELOG.md | 42 + packages/hooks/use-ref-state/package.json | 4 +- packages/hooks/use-resize/CHANGELOG.md | 36 + packages/hooks/use-resize/package.json | 4 +- .../hooks/use-safe-layout-effect/CHANGELOG.md | 36 + .../hooks/use-safe-layout-effect/package.json | 4 +- .../hooks/use-scroll-position/CHANGELOG.md | 36 + .../hooks/use-scroll-position/package.json | 4 +- packages/hooks/use-ssr/CHANGELOG.md | 36 + packages/hooks/use-ssr/package.json | 4 +- packages/hooks/use-theme/CHANGELOG.md | 49 + packages/hooks/use-theme/package.json | 4 +- packages/hooks/use-update-effect/CHANGELOG.md | 36 + packages/hooks/use-update-effect/package.json | 4 +- packages/utilities/aria-utils/CHANGELOG.md | 119 + packages/utilities/aria-utils/package.json | 16 +- packages/utilities/dom-animation/CHANGELOG.md | 49 + packages/utilities/dom-animation/package.json | 4 +- packages/utilities/framer-utils/CHANGELOG.md | 115 + packages/utilities/framer-utils/package.json | 8 +- .../utilities/react-rsc-utils/CHANGELOG.md | 36 + .../utilities/react-rsc-utils/package.json | 4 +- packages/utilities/react-utils/CHANGELOG.md | 83 + packages/utilities/react-utils/package.json | 4 +- packages/utilities/shared-icons/CHANGELOG.md | 54 + packages/utilities/shared-icons/package.json | 4 +- packages/utilities/shared-icons/src/index.ts | 1 + .../utilities/shared-icons/src/warning.tsx | 7 +- packages/utilities/shared-utils/CHANGELOG.md | 56 + packages/utilities/shared-utils/package.json | 2 +- .../utilities/shared-utils/src/functions.ts | 29 + packages/utilities/test-utils/CHANGELOG.md | 48 + packages/utilities/test-utils/package.json | 2 +- plop/component/package.json.hbs | 8 +- plop/hook/package.json.hbs | 2 +- pnpm-lock.yaml | 2555 +++++++------ 1547 files changed, 50214 insertions(+), 30581 deletions(-) create mode 100644 .changeset/angry-maps-serve.md create mode 100644 .changeset/brave-trains-wave.md create mode 100644 .changeset/calm-weeks-tie.md create mode 100644 .changeset/cold-dolls-vanish.md create mode 100644 .changeset/curly-rules-warn.md create mode 100644 .changeset/empty-helper-wrapper-div.md create mode 100644 .changeset/famous-experts-buy.md create mode 100644 .changeset/five-adults-protect.md create mode 100644 .changeset/fluffy-icons-refuse.md create mode 100644 .changeset/fuzzy-lies-brush.md create mode 100644 .changeset/gentle-needles-rescue.md create mode 100644 .changeset/happy-parrots-search.md create mode 100644 .changeset/kind-insects-end.md create mode 100644 .changeset/lazy-buttons-exercise.md create mode 100644 .changeset/many-starfishes-refuse.md create mode 100644 .changeset/moody-rabbits-shop.md create mode 100644 .changeset/nasty-bees-sniff.md create mode 100644 .changeset/new-cougars-collect.md create mode 100644 .changeset/plenty-scissors-love.md create mode 100644 .changeset/polite-mails-kneel.md create mode 100644 .changeset/pretty-parrots-guess.md create mode 100644 .changeset/proud-chicken-impress.md create mode 100644 .changeset/purple-berries-play.md create mode 100644 .changeset/red-camels-build.md create mode 100644 .changeset/selfish-baboons-know.md create mode 100644 .changeset/sharp-pianos-pump.md create mode 100644 .changeset/silly-candles-wonder.md create mode 100644 .changeset/sixty-ties-knock.md create mode 100644 .changeset/sour-bikes-burn.md create mode 100644 .changeset/spotty-flies-jump.md create mode 100644 .changeset/spotty-spies-call.md create mode 100644 .changeset/tame-planes-think.md create mode 100644 .changeset/ten-paws-relate.md create mode 100644 .changeset/tender-buses-sort.md create mode 100644 .changeset/tiny-laws-cheer.md create mode 100644 .changeset/tough-brooms-hunt.md create mode 100644 .changeset/twelve-trains-smile.md create mode 100644 .github/workflows/update-stats.yml create mode 100644 apps/docs/components/docs/components/helper.ts create mode 100644 apps/docs/config/github-info.json create mode 100644 apps/docs/content/components/alert/colors.raw.jsx create mode 100644 apps/docs/content/components/alert/controlled.raw.jsx create mode 100644 apps/docs/content/components/alert/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/alert/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/alert/custom-styles.raw.tsx create mode 100644 apps/docs/content/components/alert/radius.raw.jsx create mode 100644 apps/docs/content/components/alert/usage.raw.jsx create mode 100644 apps/docs/content/components/alert/variants.raw.jsx create mode 100644 apps/docs/content/components/alert/with-action.raw.jsx create mode 100644 apps/docs/content/components/alert/with-action.ts create mode 100644 apps/docs/content/components/alert/with-icon.raw.jsx create mode 100644 apps/docs/content/components/alert/without-icon.raw.jsx create mode 100644 apps/docs/content/components/alert/without-icon.ts create mode 100644 apps/docs/content/components/autocomplete/async-filtering.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/async-filtering.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/async-loading-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/async-loading-items.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/colors.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/controlled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/controlled.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-filtering.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-filtering.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/custom-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-value.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/description.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/disabled-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/disabled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/dynamic.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/error-message.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/events.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/events.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/fully-controlled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/fully-controlled.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/item-start-content.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/label-placements.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/read-only.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/required.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/sections.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/sizes.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/start-content.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/usage.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/variants.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts create mode 100644 apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts create mode 100644 apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts create mode 100644 apps/docs/content/components/autocomplete/virtualization.ts create mode 100644 apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx create mode 100644 apps/docs/content/components/avatar/bordered.raw.jsx create mode 100644 apps/docs/content/components/avatar/colors.raw.jsx create mode 100644 apps/docs/content/components/avatar/custom-fallback.raw.jsx create mode 100644 apps/docs/content/components/avatar/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/avatar/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/avatar/custom.raw.jsx create mode 100644 apps/docs/content/components/avatar/disabled.raw.jsx create mode 100644 apps/docs/content/components/avatar/fallbacks.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-custom-count.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-custom-impl.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-custom-impl.raw.tsx create mode 100644 apps/docs/content/components/avatar/group-disabled.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-grid.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-max.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-total.raw.jsx create mode 100644 apps/docs/content/components/avatar/group.raw.jsx create mode 100644 apps/docs/content/components/avatar/radius.raw.jsx create mode 100644 apps/docs/content/components/avatar/sizes.raw.jsx create mode 100644 apps/docs/content/components/avatar/usage.raw.jsx create mode 100644 apps/docs/content/components/badge/a11y.raw.jsx create mode 100644 apps/docs/content/components/badge/colors.raw.jsx create mode 100644 apps/docs/content/components/badge/content-examples.raw.jsx create mode 100644 apps/docs/content/components/badge/placements.raw.jsx create mode 100644 apps/docs/content/components/badge/shapes.raw.jsx create mode 100644 apps/docs/content/components/badge/show-outline.raw.jsx create mode 100644 apps/docs/content/components/badge/sizes.raw.jsx create mode 100644 apps/docs/content/components/badge/usage.raw.jsx create mode 100644 apps/docs/content/components/badge/variants.raw.jsx create mode 100644 apps/docs/content/components/badge/visibility.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/colors.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/controlled.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/controlled.raw.tsx create mode 100644 apps/docs/content/components/breadcrumbs/custom-items.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/disabled.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/menu-type.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/menu-type.raw.tsx create mode 100644 apps/docs/content/components/breadcrumbs/radius.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/routing.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/separator.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/sizes.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/underlines.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/usage.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/variants.raw.jsx create mode 100644 apps/docs/content/components/button/colors.raw.jsx create mode 100644 apps/docs/content/components/button/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/button/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/button/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/button/disabled.raw.jsx create mode 100644 apps/docs/content/components/button/group-disabled.raw.jsx create mode 100644 apps/docs/content/components/button/group-use-case.raw.jsx create mode 100644 apps/docs/content/components/button/group.raw.jsx create mode 100644 apps/docs/content/components/button/icon-only.raw.jsx create mode 100644 apps/docs/content/components/button/icons.raw.jsx create mode 100644 apps/docs/content/components/button/loading-custom.raw.jsx create mode 100644 apps/docs/content/components/button/loading.raw.jsx create mode 100644 apps/docs/content/components/button/radius.raw.jsx create mode 100644 apps/docs/content/components/button/sizes.raw.jsx create mode 100644 apps/docs/content/components/button/usage.raw.jsx create mode 100644 apps/docs/content/components/button/variants.raw.jsx create mode 100644 apps/docs/content/components/calendar/controlled-focused-value.raw.jsx create mode 100644 apps/docs/content/components/calendar/controlled-focused-value.raw.tsx create mode 100644 apps/docs/content/components/calendar/controlled.raw.jsx create mode 100644 apps/docs/content/components/calendar/controlled.raw.tsx create mode 100644 apps/docs/content/components/calendar/disabled.raw.jsx create mode 100644 apps/docs/content/components/calendar/international-calendars.raw.jsx create mode 100644 apps/docs/content/components/calendar/invalid-date.raw.jsx create mode 100644 apps/docs/content/components/calendar/invalid-date.raw.tsx create mode 100644 apps/docs/content/components/calendar/max-date-value.raw.jsx create mode 100644 apps/docs/content/components/calendar/min-date-value.raw.jsx create mode 100644 apps/docs/content/components/calendar/page-behaviour.raw.jsx create mode 100644 apps/docs/content/components/calendar/presets.raw.jsx create mode 100644 apps/docs/content/components/calendar/presets.raw.tsx create mode 100644 apps/docs/content/components/calendar/read-only.raw.jsx create mode 100644 apps/docs/content/components/calendar/unavailable-dates.raw.jsx create mode 100644 apps/docs/content/components/calendar/usage.raw.jsx create mode 100644 apps/docs/content/components/calendar/visible-months.raw.jsx create mode 100644 apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx create mode 100644 apps/docs/content/components/card/blurred-footer.raw.jsx create mode 100644 apps/docs/content/components/card/blurred.raw.jsx create mode 100644 apps/docs/content/components/card/composition.raw.jsx create mode 100644 apps/docs/content/components/card/cover-image.raw.jsx create mode 100644 apps/docs/content/components/card/divider.raw.jsx create mode 100644 apps/docs/content/components/card/image.raw.jsx create mode 100644 apps/docs/content/components/card/primary-action.raw.jsx create mode 100644 apps/docs/content/components/card/usage.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/controlled.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/disabled.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/horizontal.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/invalid.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/usage.raw.jsx create mode 100644 apps/docs/content/components/checkbox/colors.raw.jsx create mode 100644 apps/docs/content/components/checkbox/controlled.raw.jsx create mode 100644 apps/docs/content/components/checkbox/custom-check-icon.raw.jsx create mode 100644 apps/docs/content/components/checkbox/custom-implementation.raw.jsx create mode 100644 apps/docs/content/components/checkbox/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/checkbox/disabled.raw.jsx create mode 100644 apps/docs/content/components/checkbox/indeterminate.raw.jsx create mode 100644 apps/docs/content/components/checkbox/line-through.raw.jsx create mode 100644 apps/docs/content/components/checkbox/radius.raw.jsx create mode 100644 apps/docs/content/components/checkbox/sizes.raw.jsx create mode 100644 apps/docs/content/components/checkbox/usage.raw.jsx create mode 100644 apps/docs/content/components/chip/avatar.raw.jsx create mode 100644 apps/docs/content/components/chip/close-button.raw.jsx create mode 100644 apps/docs/content/components/chip/colors.raw.jsx create mode 100644 apps/docs/content/components/chip/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/chip/disabled.raw.jsx create mode 100644 apps/docs/content/components/chip/list.raw.jsx create mode 100644 apps/docs/content/components/chip/radius.raw.jsx create mode 100644 apps/docs/content/components/chip/sizes.raw.jsx create mode 100644 apps/docs/content/components/chip/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/chip/usage.raw.jsx create mode 100644 apps/docs/content/components/chip/variants.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/colors.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/label.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/sizes.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/usage.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/value-formatting.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/value.raw.jsx create mode 100644 apps/docs/content/components/code/colors.raw.jsx create mode 100644 apps/docs/content/components/code/sizes.raw.jsx create mode 100644 apps/docs/content/components/code/usage.raw.jsx create mode 100644 apps/docs/content/components/date-input/controlled.raw.jsx create mode 100644 apps/docs/content/components/date-input/controlled.raw.tsx create mode 100644 apps/docs/content/components/date-input/description.raw.jsx create mode 100644 apps/docs/content/components/date-input/disabled.raw.jsx create mode 100644 apps/docs/content/components/date-input/error-message-function.raw.jsx create mode 100644 apps/docs/content/components/date-input/error-message.raw.jsx create mode 100644 apps/docs/content/components/date-input/granularity.raw.jsx create mode 100644 apps/docs/content/components/date-input/granularity.raw.tsx create mode 100644 apps/docs/content/components/date-input/hide-timezone.raw.jsx create mode 100644 apps/docs/content/components/date-input/hourly-cycle.raw.jsx create mode 100644 apps/docs/content/components/date-input/international-calendar.raw.jsx create mode 100644 apps/docs/content/components/date-input/international-calendar.raw.tsx create mode 100644 apps/docs/content/components/date-input/label-placements.raw.jsx create mode 100644 apps/docs/content/components/date-input/min-and-max-date.raw.jsx create mode 100644 apps/docs/content/components/date-input/readonly.raw.jsx create mode 100644 apps/docs/content/components/date-input/required.raw.jsx create mode 100644 apps/docs/content/components/date-input/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/date-input/time-zones.raw.jsx create mode 100644 apps/docs/content/components/date-input/usage.raw.jsx create mode 100644 apps/docs/content/components/date-input/variants.raw.jsx create mode 100644 apps/docs/content/components/date-picker/controlled.raw.jsx create mode 100644 apps/docs/content/components/date-picker/controlled.raw.tsx create mode 100644 apps/docs/content/components/date-picker/description.raw.jsx create mode 100644 apps/docs/content/components/date-picker/disabled.raw.jsx create mode 100644 apps/docs/content/components/date-picker/error-message-function.raw.jsx create mode 100644 apps/docs/content/components/date-picker/error-message.raw.jsx create mode 100644 apps/docs/content/components/date-picker/granularity.raw.jsx create mode 100644 apps/docs/content/components/date-picker/granularity.raw.tsx create mode 100644 apps/docs/content/components/date-picker/international-calendar.raw.jsx create mode 100644 apps/docs/content/components/date-picker/international-calendar.raw.tsx create mode 100644 apps/docs/content/components/date-picker/label-placements.raw.jsx create mode 100644 apps/docs/content/components/date-picker/min-and-max-date.raw.jsx create mode 100644 apps/docs/content/components/date-picker/page-behavior.raw.jsx create mode 100644 apps/docs/content/components/date-picker/preset.raw.jsx create mode 100644 apps/docs/content/components/date-picker/preset.raw.tsx create mode 100644 apps/docs/content/components/date-picker/readonly.raw.jsx create mode 100644 apps/docs/content/components/date-picker/required.raw.jsx create mode 100644 apps/docs/content/components/date-picker/selector-button-placement.raw.jsx create mode 100644 apps/docs/content/components/date-picker/selector-icon.raw.jsx create mode 100644 apps/docs/content/components/date-picker/time-zones.raw.jsx create mode 100644 apps/docs/content/components/date-picker/unavailable-dates.raw.jsx create mode 100644 apps/docs/content/components/date-picker/usage.raw.jsx create mode 100644 apps/docs/content/components/date-picker/variants.raw.jsx create mode 100644 apps/docs/content/components/date-picker/visible-month.raw.jsx create mode 100644 apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx create mode 100644 apps/docs/content/components/date-picker/with-time-field.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/controlled.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/controlled.raw.tsx create mode 100644 apps/docs/content/components/date-range-picker/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/description.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/disabled.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/error-message-function.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/error-message.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/granularity.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/granularity.raw.tsx create mode 100644 apps/docs/content/components/date-range-picker/international-calendar.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/international-calendar.raw.tsx create mode 100644 apps/docs/content/components/date-range-picker/label-placements.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/page-behavior.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/presets.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/readonly.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/required.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/selector-icon.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/time-zones.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/usage.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/variants.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/visible-month.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx create mode 100644 apps/docs/content/components/date-range-picker/with-time-field.raw.jsx create mode 100644 apps/docs/content/components/divider/usage.raw.jsx create mode 100644 apps/docs/content/components/drawer/backdrop.raw.jsx create mode 100644 apps/docs/content/components/drawer/custom-motion.raw.jsx create mode 100644 apps/docs/content/components/drawer/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/drawer/custom-styles.ts create mode 100644 apps/docs/content/components/drawer/form.raw.jsx create mode 100644 apps/docs/content/components/drawer/non-dismissable.raw.jsx create mode 100644 apps/docs/content/components/drawer/placement.raw.jsx create mode 100644 apps/docs/content/components/drawer/sizes.raw.jsx create mode 100644 apps/docs/content/components/drawer/usage.raw.jsx create mode 100644 apps/docs/content/components/dropdown/action.raw.jsx create mode 100644 apps/docs/content/components/dropdown/backdrop.raw.jsx create mode 100644 apps/docs/content/components/dropdown/custom-items-styles.raw.jsx create mode 100644 apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx create mode 100644 apps/docs/content/components/dropdown/custom-trigger.raw.jsx create mode 100644 apps/docs/content/components/dropdown/description.raw.jsx create mode 100644 apps/docs/content/components/dropdown/disabled-keys.raw.jsx create mode 100644 apps/docs/content/components/dropdown/dynamic.raw.jsx create mode 100644 apps/docs/content/components/dropdown/icons.raw.jsx create mode 100644 apps/docs/content/components/dropdown/multiple-selection.raw.jsx create mode 100644 apps/docs/content/components/dropdown/multiple-selection.raw.tsx create mode 100644 apps/docs/content/components/dropdown/sections.raw.jsx create mode 100644 apps/docs/content/components/dropdown/shortcut.raw.jsx create mode 100644 apps/docs/content/components/dropdown/single-selection.raw.jsx create mode 100644 apps/docs/content/components/dropdown/single-selection.raw.tsx create mode 100644 apps/docs/content/components/dropdown/usage.raw.jsx create mode 100644 apps/docs/content/components/dropdown/variants.raw.jsx create mode 100644 apps/docs/content/components/image/blurred.raw.jsx create mode 100644 apps/docs/content/components/image/fallback.raw.jsx create mode 100644 apps/docs/content/components/image/loading.raw.jsx create mode 100644 apps/docs/content/components/image/nextjs.raw.jsx create mode 100644 apps/docs/content/components/image/usage.raw.jsx create mode 100644 apps/docs/content/components/image/zoomed.raw.jsx create mode 100644 apps/docs/content/components/input-otp/allowed-keys.raw.jsx create mode 100644 apps/docs/content/components/input-otp/allowed-keys.ts create mode 100644 apps/docs/content/components/input-otp/colors.raw.jsx create mode 100644 apps/docs/content/components/input-otp/colors.ts create mode 100644 apps/docs/content/components/input-otp/controlled.raw.jsx create mode 100644 apps/docs/content/components/input-otp/controlled.ts create mode 100644 apps/docs/content/components/input-otp/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/input-otp/custom-styles.ts create mode 100644 apps/docs/content/components/input-otp/description.raw.jsx create mode 100644 apps/docs/content/components/input-otp/description.ts create mode 100644 apps/docs/content/components/input-otp/disabled.raw.jsx create mode 100644 apps/docs/content/components/input-otp/disabled.ts create mode 100644 apps/docs/content/components/input-otp/error-message.raw.jsx create mode 100644 apps/docs/content/components/input-otp/error-message.ts create mode 100644 apps/docs/content/components/input-otp/form.raw.jsx create mode 100644 apps/docs/content/components/input-otp/form.raw.tsx create mode 100644 apps/docs/content/components/input-otp/form.ts create mode 100644 apps/docs/content/components/input-otp/index.ts create mode 100644 apps/docs/content/components/input-otp/lengths.raw.jsx create mode 100644 apps/docs/content/components/input-otp/lengths.ts create mode 100644 apps/docs/content/components/input-otp/password.raw.jsx create mode 100644 apps/docs/content/components/input-otp/password.ts create mode 100644 apps/docs/content/components/input-otp/radius.raw.jsx create mode 100644 apps/docs/content/components/input-otp/radius.ts create mode 100644 apps/docs/content/components/input-otp/readonly.raw.jsx create mode 100644 apps/docs/content/components/input-otp/readonly.ts create mode 100644 apps/docs/content/components/input-otp/required.raw.jsx create mode 100644 apps/docs/content/components/input-otp/required.ts create mode 100644 apps/docs/content/components/input-otp/sizes.raw.jsx create mode 100644 apps/docs/content/components/input-otp/sizes.ts create mode 100644 apps/docs/content/components/input-otp/usage.raw.jsx create mode 100644 apps/docs/content/components/input-otp/usage.raw.tsx create mode 100644 apps/docs/content/components/input-otp/usage.ts create mode 100644 apps/docs/content/components/input-otp/variants.raw.jsx create mode 100644 apps/docs/content/components/input-otp/variants.ts create mode 100644 apps/docs/content/components/input/clear-button.raw.jsx create mode 100644 apps/docs/content/components/input/colors.raw.jsx create mode 100644 apps/docs/content/components/input/controlled.raw.jsx create mode 100644 apps/docs/content/components/input/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/input/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/input/description.raw.jsx create mode 100644 apps/docs/content/components/input/disabled.raw.jsx create mode 100644 apps/docs/content/components/input/error-message.raw.jsx create mode 100644 apps/docs/content/components/input/label-placements.raw.jsx create mode 100644 apps/docs/content/components/input/password.raw.jsx create mode 100644 apps/docs/content/components/input/radius.raw.jsx create mode 100644 apps/docs/content/components/input/readonly.raw.jsx create mode 100644 apps/docs/content/components/input/regex-validation.raw.jsx create mode 100644 apps/docs/content/components/input/required.raw.jsx create mode 100644 apps/docs/content/components/input/sizes.raw.jsx create mode 100644 apps/docs/content/components/input/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/input/usage.raw.jsx create mode 100644 apps/docs/content/components/input/variants.raw.jsx create mode 100644 apps/docs/content/components/kbd/keys.raw.jsx create mode 100644 apps/docs/content/components/kbd/usage.raw.jsx create mode 100644 apps/docs/content/components/link/block.raw.jsx create mode 100644 apps/docs/content/components/link/colors.raw.jsx create mode 100644 apps/docs/content/components/link/custom-anchor-icon.raw.jsx create mode 100644 apps/docs/content/components/link/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/link/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/link/disabled.raw.jsx create mode 100644 apps/docs/content/components/link/external.raw.jsx create mode 100644 apps/docs/content/components/link/nextjs.raw.jsx create mode 100644 apps/docs/content/components/link/polymorphic.raw.jsx create mode 100644 apps/docs/content/components/link/sizes.raw.jsx create mode 100644 apps/docs/content/components/link/underline.raw.jsx create mode 100644 apps/docs/content/components/link/usage.raw.jsx create mode 100644 apps/docs/content/components/listbox/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/listbox/description.raw.jsx create mode 100644 apps/docs/content/components/listbox/disabled-keys.raw.jsx create mode 100644 apps/docs/content/components/listbox/dynamic.raw.jsx create mode 100644 apps/docs/content/components/listbox/icons.raw.jsx create mode 100644 apps/docs/content/components/listbox/multiple-selection.raw.jsx create mode 100644 apps/docs/content/components/listbox/sections.raw.jsx create mode 100644 apps/docs/content/components/listbox/single-selection.raw.jsx create mode 100644 apps/docs/content/components/listbox/top-content.raw.jsx create mode 100644 apps/docs/content/components/listbox/top-content.raw.tsx create mode 100644 apps/docs/content/components/listbox/usage.raw.jsx create mode 100644 apps/docs/content/components/listbox/variants.raw.jsx create mode 100644 apps/docs/content/components/modal/backdrop.raw.jsx create mode 100644 apps/docs/content/components/modal/custom-backdrop.raw.jsx create mode 100644 apps/docs/content/components/modal/custom-motion.raw.jsx create mode 100644 apps/docs/content/components/modal/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/modal/draggable-overflow.raw.jsx create mode 100644 apps/docs/content/components/modal/draggable.raw.jsx create mode 100644 apps/docs/content/components/modal/form.raw.jsx create mode 100644 apps/docs/content/components/modal/non-dismissable.raw.jsx create mode 100644 apps/docs/content/components/modal/overflow.raw.jsx create mode 100644 apps/docs/content/components/modal/overflow.raw.tsx create mode 100644 apps/docs/content/components/modal/placement.raw.jsx create mode 100644 apps/docs/content/components/modal/sizes.raw.jsx create mode 100644 apps/docs/content/components/modal/usage.raw.jsx create mode 100644 apps/docs/content/components/navbar/bordered.raw.jsx create mode 100644 apps/docs/content/components/navbar/controlled-menu.raw.jsx create mode 100644 apps/docs/content/components/navbar/custom-active-item.raw.jsx create mode 100644 apps/docs/content/components/navbar/disable-menu-animation.raw.jsx create mode 100644 apps/docs/content/components/navbar/disabled-blur.raw.jsx create mode 100644 apps/docs/content/components/navbar/hide-on-scroll.raw.jsx create mode 100644 apps/docs/content/components/navbar/static.raw.jsx create mode 100644 apps/docs/content/components/navbar/usage.raw.jsx create mode 100644 apps/docs/content/components/navbar/with-avatar.raw.jsx create mode 100644 apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx create mode 100644 apps/docs/content/components/navbar/with-menu.raw.jsx create mode 100644 apps/docs/content/components/navbar/with-search-input.raw.jsx create mode 100644 apps/docs/content/components/pagination/boundaries.raw.jsx create mode 100644 apps/docs/content/components/pagination/colors.raw.jsx create mode 100644 apps/docs/content/components/pagination/compact.raw.jsx create mode 100644 apps/docs/content/components/pagination/controlled.raw.jsx create mode 100644 apps/docs/content/components/pagination/controls.raw.jsx create mode 100644 apps/docs/content/components/pagination/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/pagination/custom-items.raw.jsx create mode 100644 apps/docs/content/components/pagination/custom-items.raw.tsx create mode 100644 apps/docs/content/components/pagination/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/pagination/disabled.raw.jsx create mode 100644 apps/docs/content/components/pagination/initial-page.raw.jsx create mode 100644 apps/docs/content/components/pagination/loop.raw.jsx create mode 100644 apps/docs/content/components/pagination/radius.raw.jsx create mode 100644 apps/docs/content/components/pagination/shadow.raw.jsx create mode 100644 apps/docs/content/components/pagination/siblings.raw.jsx create mode 100644 apps/docs/content/components/pagination/sizes.raw.jsx create mode 100644 apps/docs/content/components/pagination/usage.raw.jsx create mode 100644 apps/docs/content/components/pagination/variants.raw.jsx create mode 100644 apps/docs/content/components/popover/arrow.raw.jsx create mode 100644 apps/docs/content/components/popover/backdrop.raw.jsx create mode 100644 apps/docs/content/components/popover/colors.raw.jsx create mode 100644 apps/docs/content/components/popover/controlled.raw.jsx create mode 100644 apps/docs/content/components/popover/custom-motion.raw.jsx create mode 100644 apps/docs/content/components/popover/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/popover/custom-trigger.raw.jsx create mode 100644 apps/docs/content/components/popover/offset.raw.jsx create mode 100644 apps/docs/content/components/popover/placements.raw.jsx create mode 100644 apps/docs/content/components/popover/title-props.raw.jsx create mode 100644 apps/docs/content/components/popover/usage.raw.jsx create mode 100644 apps/docs/content/components/popover/variants.raw.jsx create mode 100644 apps/docs/content/components/popover/with-form.raw.jsx create mode 100644 apps/docs/content/components/progress/colors.raw.jsx create mode 100644 apps/docs/content/components/progress/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/progress/indeterminate.raw.jsx create mode 100644 apps/docs/content/components/progress/label.raw.jsx create mode 100644 apps/docs/content/components/progress/sizes.raw.jsx create mode 100644 apps/docs/content/components/progress/striped.raw.jsx create mode 100644 apps/docs/content/components/progress/usage.raw.jsx create mode 100644 apps/docs/content/components/progress/value-formatting.raw.jsx create mode 100644 apps/docs/content/components/progress/value.raw.jsx create mode 100644 apps/docs/content/components/radio-group/controlled.raw.jsx create mode 100644 apps/docs/content/components/radio-group/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/radio-group/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/radio-group/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/radio-group/default-value.raw.jsx create mode 100644 apps/docs/content/components/radio-group/disabled.raw.jsx create mode 100644 apps/docs/content/components/radio-group/horizontal.raw.jsx create mode 100644 apps/docs/content/components/radio-group/invalid.raw.jsx create mode 100644 apps/docs/content/components/radio-group/usage.raw.jsx create mode 100644 apps/docs/content/components/radio-group/with-description.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/controlled.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/controlled.raw.tsx create mode 100644 apps/docs/content/components/range-calendar/disabled.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/international-calendars.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/invalid-date.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/invalid-date.raw.tsx create mode 100644 apps/docs/content/components/range-calendar/max-date-value.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/min-date-value.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/page-behaviour.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/presets.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/presets.raw.tsx create mode 100644 apps/docs/content/components/range-calendar/read-only.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/usage.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/visible-months.raw.jsx create mode 100644 apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/custom-size.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/horizontal.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/offset.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/usage.raw.jsx create mode 100644 apps/docs/content/components/select/async-loading-items.raw.jsx create mode 100644 apps/docs/content/components/select/async-loading-items.raw.tsx create mode 100644 apps/docs/content/components/select/colors.raw.jsx create mode 100644 apps/docs/content/components/select/custom-items.raw.jsx create mode 100644 apps/docs/content/components/select/custom-render-value.raw.jsx create mode 100644 apps/docs/content/components/select/custom-render-value.raw.tsx create mode 100644 apps/docs/content/components/select/custom-sections-style.raw.jsx create mode 100644 apps/docs/content/components/select/custom-selector-icon.raw.jsx create mode 100644 apps/docs/content/components/select/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/select/description.raw.jsx create mode 100644 apps/docs/content/components/select/disabled-items.raw.jsx create mode 100644 apps/docs/content/components/select/disabled.raw.jsx create mode 100644 apps/docs/content/components/select/dynamic.raw.jsx create mode 100644 apps/docs/content/components/select/error-message.raw.jsx create mode 100644 apps/docs/content/components/select/item-start-content.raw.jsx create mode 100644 apps/docs/content/components/select/label-placements.raw.jsx create mode 100644 apps/docs/content/components/select/multiple-chips.raw.jsx create mode 100644 apps/docs/content/components/select/multiple-chips.raw.tsx create mode 100644 apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx create mode 100644 apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx create mode 100644 apps/docs/content/components/select/multiple-controlled.raw.jsx create mode 100644 apps/docs/content/components/select/multiple-controlled.raw.tsx create mode 100644 apps/docs/content/components/select/multiple.raw.jsx create mode 100644 apps/docs/content/components/select/open-state.raw.jsx create mode 100644 apps/docs/content/components/select/radius.raw.jsx create mode 100644 apps/docs/content/components/select/required.raw.jsx create mode 100644 apps/docs/content/components/select/sections.raw.jsx create mode 100644 apps/docs/content/components/select/single-controlled-onchange.raw.jsx create mode 100644 apps/docs/content/components/select/single-controlled-onchange.raw.tsx create mode 100644 apps/docs/content/components/select/single-controlled.raw.jsx create mode 100644 apps/docs/content/components/select/single-controlled.raw.tsx create mode 100644 apps/docs/content/components/select/sizes.raw.jsx create mode 100644 apps/docs/content/components/select/start-content.raw.jsx create mode 100644 apps/docs/content/components/select/usage.raw.jsx create mode 100644 apps/docs/content/components/select/variants.raw.jsx create mode 100644 apps/docs/content/components/select/without-scroll-shadow.raw.jsx create mode 100644 apps/docs/content/components/skeleton/loaded.raw.jsx create mode 100644 apps/docs/content/components/skeleton/standalone.raw.jsx create mode 100644 apps/docs/content/components/skeleton/usage.raw.jsx create mode 100644 apps/docs/content/components/slider/colors.raw.jsx create mode 100644 apps/docs/content/components/slider/controlled-change-end.raw.jsx create mode 100644 apps/docs/content/components/slider/controlled-change-end.raw.tsx create mode 100644 apps/docs/content/components/slider/controlled-range.raw.jsx create mode 100644 apps/docs/content/components/slider/controlled-range.raw.tsx create mode 100644 apps/docs/content/components/slider/controlled.raw.jsx create mode 100644 apps/docs/content/components/slider/controlled.raw.tsx create mode 100644 apps/docs/content/components/slider/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/slider/disable-thumb-scale.raw.jsx create mode 100644 apps/docs/content/components/slider/disabled.raw.jsx create mode 100644 apps/docs/content/components/slider/fill-offset.raw.jsx create mode 100644 apps/docs/content/components/slider/get-value.raw.jsx create mode 100644 apps/docs/content/components/slider/hide-thumb.raw.jsx create mode 100644 apps/docs/content/components/slider/hide-value.raw.jsx create mode 100644 apps/docs/content/components/slider/marks.raw.jsx create mode 100644 apps/docs/content/components/slider/outline.raw.jsx create mode 100644 apps/docs/content/components/slider/radius.raw.jsx create mode 100644 apps/docs/content/components/slider/range.raw.jsx create mode 100644 apps/docs/content/components/slider/render-label.raw.jsx create mode 100644 apps/docs/content/components/slider/render-range-thumb.raw.jsx create mode 100644 apps/docs/content/components/slider/render-thumb.raw.jsx create mode 100644 apps/docs/content/components/slider/render-value.raw.jsx create mode 100644 apps/docs/content/components/slider/render-value.raw.tsx create mode 100644 apps/docs/content/components/slider/sizes.raw.jsx create mode 100644 apps/docs/content/components/slider/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/slider/tooltip.raw.jsx create mode 100644 apps/docs/content/components/slider/usage.raw.jsx create mode 100644 apps/docs/content/components/slider/value-formatting.raw.jsx create mode 100644 apps/docs/content/components/slider/vertical.raw.jsx create mode 100644 apps/docs/content/components/slider/visible-steps.raw.jsx create mode 100644 apps/docs/content/components/snippet/colors.raw.jsx create mode 100644 apps/docs/content/components/snippet/custom-icons.raw.jsx create mode 100644 apps/docs/content/components/snippet/custom-tooltip.raw.jsx create mode 100644 apps/docs/content/components/snippet/multiline.raw.jsx create mode 100644 apps/docs/content/components/snippet/sizes.raw.jsx create mode 100644 apps/docs/content/components/snippet/symbol.raw.jsx create mode 100644 apps/docs/content/components/snippet/usage.raw.jsx create mode 100644 apps/docs/content/components/snippet/variants.raw.jsx create mode 100644 apps/docs/content/components/snippet/without-copy.raw.jsx create mode 100644 apps/docs/content/components/spacer/usage.raw.jsx create mode 100644 apps/docs/content/components/spinner/colors.raw.jsx create mode 100644 apps/docs/content/components/spinner/label-colors.raw.jsx create mode 100644 apps/docs/content/components/spinner/label.raw.jsx create mode 100644 apps/docs/content/components/spinner/sizes.raw.jsx create mode 100644 apps/docs/content/components/spinner/usage.raw.jsx create mode 100644 apps/docs/content/components/switch/colors.raw.jsx create mode 100644 apps/docs/content/components/switch/controlled.raw.jsx create mode 100644 apps/docs/content/components/switch/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/switch/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/switch/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/switch/disabled.raw.jsx create mode 100644 apps/docs/content/components/switch/icons.raw.jsx create mode 100644 apps/docs/content/components/switch/label.raw.jsx create mode 100644 apps/docs/content/components/switch/sizes.raw.jsx create mode 100644 apps/docs/content/components/switch/thumb-icon.raw.jsx create mode 100644 apps/docs/content/components/switch/usage.raw.jsx create mode 100644 apps/docs/content/components/table/async-pagination.raw.jsx create mode 100644 apps/docs/content/components/table/controlled-selection.raw.jsx create mode 100644 apps/docs/content/components/table/custom-cells.raw.jsx create mode 100644 apps/docs/content/components/table/custom-cells.raw.tsx create mode 100644 apps/docs/content/components/table/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/table/custom-styles.raw.tsx create mode 100644 apps/docs/content/components/table/disabled-rows.raw.jsx create mode 100644 apps/docs/content/components/table/disallow-empty-selection.raw.jsx create mode 100644 apps/docs/content/components/table/dynamic.raw.jsx create mode 100644 apps/docs/content/components/table/empty.raw.jsx create mode 100644 apps/docs/content/components/table/infinite-pagination.raw.jsx create mode 100644 apps/docs/content/components/table/infinite-pagination.raw.tsx create mode 100644 apps/docs/content/components/table/load-more.raw.jsx create mode 100644 apps/docs/content/components/table/multiple-selection.raw.jsx create mode 100644 apps/docs/content/components/table/paginated.raw.jsx create mode 100644 apps/docs/content/components/table/row-actions.raw.jsx create mode 100644 apps/docs/content/components/table/selection-behavior.raw.jsx create mode 100644 apps/docs/content/components/table/single-selection.raw.jsx create mode 100644 apps/docs/content/components/table/sorting.raw.jsx create mode 100644 apps/docs/content/components/table/striped.raw.jsx create mode 100644 apps/docs/content/components/table/usage.raw.jsx create mode 100644 apps/docs/content/components/table/use-case.raw.jsx create mode 100644 apps/docs/content/components/table/use-case.raw.tsx create mode 100644 apps/docs/content/components/table/without-header.raw.jsx create mode 100644 apps/docs/content/components/table/without-wrapper.raw.jsx create mode 100644 apps/docs/content/components/tabs/colors.raw.jsx create mode 100644 apps/docs/content/components/tabs/controlled.raw.jsx create mode 100644 apps/docs/content/components/tabs/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/tabs/disabled-item.raw.jsx create mode 100644 apps/docs/content/components/tabs/disabled.raw.jsx create mode 100644 apps/docs/content/components/tabs/dynamic.raw.jsx create mode 100644 apps/docs/content/components/tabs/form.raw.jsx create mode 100644 apps/docs/content/components/tabs/form.raw.tsx create mode 100644 apps/docs/content/components/tabs/icons.raw.jsx create mode 100644 apps/docs/content/components/tabs/placement.raw.jsx create mode 100644 apps/docs/content/components/tabs/radius.raw.jsx create mode 100644 apps/docs/content/components/tabs/sizes.raw.jsx create mode 100644 apps/docs/content/components/tabs/usage.raw.jsx create mode 100644 apps/docs/content/components/tabs/variants.raw.jsx create mode 100644 apps/docs/content/components/tabs/vertical.raw.jsx create mode 100644 apps/docs/content/components/textarea/autosize.raw.jsx create mode 100644 apps/docs/content/components/textarea/clear-button.raw.jsx create mode 100644 apps/docs/content/components/textarea/clear-button.ts create mode 100644 apps/docs/content/components/textarea/controlled.raw.jsx create mode 100644 apps/docs/content/components/textarea/description.raw.jsx create mode 100644 apps/docs/content/components/textarea/disable-autosize.raw.jsx create mode 100644 apps/docs/content/components/textarea/disabled.raw.jsx create mode 100644 apps/docs/content/components/textarea/error-message.raw.jsx create mode 100644 apps/docs/content/components/textarea/readonly.raw.jsx create mode 100644 apps/docs/content/components/textarea/required.raw.jsx create mode 100644 apps/docs/content/components/textarea/usage.raw.jsx create mode 100644 apps/docs/content/components/textarea/variants.raw.jsx create mode 100644 apps/docs/content/components/time-input/controlled.raw.jsx create mode 100644 apps/docs/content/components/time-input/controlled.raw.tsx create mode 100644 apps/docs/content/components/time-input/disabled.raw.jsx create mode 100644 apps/docs/content/components/time-input/end-content.raw.jsx create mode 100644 apps/docs/content/components/time-input/error-message-function.raw.jsx create mode 100644 apps/docs/content/components/time-input/error-message.raw.jsx create mode 100644 apps/docs/content/components/time-input/granularity.raw.jsx create mode 100644 apps/docs/content/components/time-input/granularity.raw.tsx create mode 100644 apps/docs/content/components/time-input/hide-timezone.raw.jsx create mode 100644 apps/docs/content/components/time-input/hour-cycle.raw.jsx create mode 100644 apps/docs/content/components/time-input/label-placement.raw.jsx create mode 100644 apps/docs/content/components/time-input/max-time-value.raw.jsx create mode 100644 apps/docs/content/components/time-input/min-time-value.raw.jsx create mode 100644 apps/docs/content/components/time-input/placeholder-value.raw.jsx create mode 100644 apps/docs/content/components/time-input/read-only.raw.jsx create mode 100644 apps/docs/content/components/time-input/required.raw.jsx create mode 100644 apps/docs/content/components/time-input/start-content.raw.jsx create mode 100644 apps/docs/content/components/time-input/timezones.raw.jsx create mode 100644 apps/docs/content/components/time-input/usage.raw.jsx create mode 100644 apps/docs/content/components/time-input/with-description.raw.jsx create mode 100644 apps/docs/content/components/time-input/without-label.raw.jsx create mode 100644 apps/docs/content/components/tooltip/arrow.raw.jsx create mode 100644 apps/docs/content/components/tooltip/colors.raw.jsx create mode 100644 apps/docs/content/components/tooltip/controlled.raw.jsx create mode 100644 apps/docs/content/components/tooltip/custom-content.raw.jsx create mode 100644 apps/docs/content/components/tooltip/custom-motion.raw.jsx create mode 100644 apps/docs/content/components/tooltip/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/tooltip/delay-multiple.raw.jsx create mode 100644 apps/docs/content/components/tooltip/delay.raw.jsx create mode 100644 apps/docs/content/components/tooltip/offset.raw.jsx create mode 100644 apps/docs/content/components/tooltip/placements.raw.jsx create mode 100644 apps/docs/content/components/tooltip/usage.raw.jsx create mode 100644 apps/docs/content/components/user/link-description.raw.jsx create mode 100644 apps/docs/content/components/user/usage.raw.jsx create mode 100644 apps/docs/content/docs/components/input-otp.mdx delete mode 100644 apps/docs/public/sitemap-0.xml create mode 100644 apps/docs/scripts/update-github-info.ts create mode 100644 apps/docs/utils/number.ts create mode 100644 packages/components/alert/CHANGELOG.md create mode 100644 packages/components/drawer/CHANGELOG.md create mode 100644 packages/components/form/CHANGELOG.md create mode 100644 packages/components/form/README.md create mode 100644 packages/components/form/package.json create mode 100644 packages/components/form/src/base-form.tsx create mode 100644 packages/components/form/src/form.tsx create mode 100644 packages/components/form/src/index.ts create mode 100644 packages/components/form/src/utils.ts create mode 100644 packages/components/form/stories/form.stories.tsx create mode 100644 packages/components/form/tsconfig.json create mode 100644 packages/components/form/tsup.config.ts create mode 100644 packages/components/input-otp/CHANGELOG.md create mode 100644 packages/components/input-otp/README.md create mode 100644 packages/components/input-otp/__tests__/input-otp.test.tsx create mode 100644 packages/components/input-otp/package.json create mode 100644 packages/components/input-otp/src/index.ts create mode 100644 packages/components/input-otp/src/input-otp-context.ts create mode 100644 packages/components/input-otp/src/input-otp-segment.tsx create mode 100644 packages/components/input-otp/src/input-otp.tsx create mode 100644 packages/components/input-otp/src/use-input-otp.ts create mode 100644 packages/components/input-otp/stories/input-otp.stories.tsx create mode 100644 packages/components/input-otp/tsconfig.json create mode 100644 packages/components/input-otp/tsup.config.ts create mode 100644 packages/components/input/__tests__/textarea.test.tsx create mode 100644 packages/components/listbox/src/virtualized-listbox.tsx delete mode 100644 packages/core/theme/src/components/circular-progress.ts create mode 100644 packages/core/theme/src/components/input-otp.ts create mode 100644 packages/core/theme/src/utils/merge-classes.ts create mode 100644 packages/hooks/use-draggable/CHANGELOG.md create mode 100644 packages/hooks/use-theme/CHANGELOG.md create mode 100644 packages/utilities/dom-animation/CHANGELOG.md diff --git a/.changeset/angry-maps-serve.md b/.changeset/angry-maps-serve.md new file mode 100644 index 000000000..2bfc7db03 --- /dev/null +++ b/.changeset/angry-maps-serve.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +move circular-progress tv to progress diff --git a/.changeset/brave-trains-wave.md b/.changeset/brave-trains-wave.md new file mode 100644 index 000000000..c81facf5b --- /dev/null +++ b/.changeset/brave-trains-wave.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/menu": patch +"@nextui-org/theme": patch +--- + +Fix menu item classNames not work (#4119) diff --git a/.changeset/calm-weeks-tie.md b/.changeset/calm-weeks-tie.md new file mode 100644 index 000000000..de3f6b04e --- /dev/null +++ b/.changeset/calm-weeks-tie.md @@ -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 diff --git a/.changeset/cold-dolls-vanish.md b/.changeset/cold-dolls-vanish.md new file mode 100644 index 000000000..eba5f406b --- /dev/null +++ b/.changeset/cold-dolls-vanish.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/drawer": patch +"@nextui-org/modal": patch +--- + +Drawer styles and transition improved diff --git a/.changeset/curly-rules-warn.md b/.changeset/curly-rules-warn.md new file mode 100644 index 000000000..b86fd4c1e --- /dev/null +++ b/.changeset/curly-rules-warn.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/calendar": patch +--- + +add missing `framer-motion` in `peerDependencies` diff --git a/.changeset/empty-helper-wrapper-div.md b/.changeset/empty-helper-wrapper-div.md new file mode 100644 index 000000000..ca62626cd --- /dev/null +++ b/.changeset/empty-helper-wrapper-div.md @@ -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 diff --git a/.changeset/famous-experts-buy.md b/.changeset/famous-experts-buy.md new file mode 100644 index 000000000..c1b36c485 --- /dev/null +++ b/.changeset/famous-experts-buy.md @@ -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 diff --git a/.changeset/few-jars-flow.md b/.changeset/few-jars-flow.md index a3d2b6cfd..96d7e301e 100644 --- a/.changeset/few-jars-flow.md +++ b/.changeset/few-jars-flow.md @@ -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 diff --git a/.changeset/five-adults-protect.md b/.changeset/five-adults-protect.md new file mode 100644 index 000000000..b0c5aac84 --- /dev/null +++ b/.changeset/five-adults-protect.md @@ -0,0 +1,7 @@ +--- +"@nextui-org/input": patch +"@nextui-org/shared-icons": patch +"@nextui-org/theme": patch +--- + +introduce `isClearable` to Textarea component (#2348, #2112) diff --git a/.changeset/fluffy-icons-refuse.md b/.changeset/fluffy-icons-refuse.md new file mode 100644 index 000000000..bfde0510a --- /dev/null +++ b/.changeset/fluffy-icons-refuse.md @@ -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. diff --git a/.changeset/fuzzy-lies-brush.md b/.changeset/fuzzy-lies-brush.md new file mode 100644 index 000000000..f06b5c267 --- /dev/null +++ b/.changeset/fuzzy-lies-brush.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/table": patch +--- + +The `layoutNode` prop has been removed due to the update to react-aria. diff --git a/.changeset/gentle-needles-rescue.md b/.changeset/gentle-needles-rescue.md new file mode 100644 index 000000000..7c51ef52b --- /dev/null +++ b/.changeset/gentle-needles-rescue.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/use-image": patch +--- + +use-image hook logic restore to the previous one to avoid nextjs hydration issues diff --git a/.changeset/happy-parrots-search.md b/.changeset/happy-parrots-search.md new file mode 100644 index 000000000..61a359401 --- /dev/null +++ b/.changeset/happy-parrots-search.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +apply tw nested group (#3544, #2324, #2959) diff --git a/.changeset/kind-insects-end.md b/.changeset/kind-insects-end.md new file mode 100644 index 000000000..71e7bedb0 --- /dev/null +++ b/.changeset/kind-insects-end.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/use-image": patch +--- + +server validation added to the use-image hook diff --git a/.changeset/lazy-buttons-exercise.md b/.changeset/lazy-buttons-exercise.md new file mode 100644 index 000000000..5cdc25373 --- /dev/null +++ b/.changeset/lazy-buttons-exercise.md @@ -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 diff --git a/.changeset/light-needles-behave.md b/.changeset/light-needles-behave.md index 9ebdcb81f..7fbe05951 100644 --- a/.changeset/light-needles-behave.md +++ b/.changeset/light-needles-behave.md @@ -1,5 +1,5 @@ --- -"@nextui-org/use-theme": minor +"@nextui-org/use-theme": patch --- introduce `use-theme` hook diff --git a/.changeset/many-starfishes-refuse.md b/.changeset/many-starfishes-refuse.md new file mode 100644 index 000000000..9319f29e4 --- /dev/null +++ b/.changeset/many-starfishes-refuse.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +revise label font size for lg (#3073) diff --git a/.changeset/moody-rabbits-shop.md b/.changeset/moody-rabbits-shop.md new file mode 100644 index 000000000..8fec710f2 --- /dev/null +++ b/.changeset/moody-rabbits-shop.md @@ -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) diff --git a/.changeset/nasty-bees-sniff.md b/.changeset/nasty-bees-sniff.md new file mode 100644 index 000000000..3f129edff --- /dev/null +++ b/.changeset/nasty-bees-sniff.md @@ -0,0 +1,7 @@ +--- +"@nextui-org/listbox": patch +"@nextui-org/menu": patch +"@nextui-org/pagination": patch +--- + +Fixes missing `
  • ` wrapper when `href` prop is passed in `ListboxItem`, `MenuItem`, and `PaginationItem` (#4147) \ No newline at end of file diff --git a/.changeset/neat-donkeys-accept.md b/.changeset/neat-donkeys-accept.md index 42cad71a6..4b5ab5f29 100644 --- a/.changeset/neat-donkeys-accept.md +++ b/.changeset/neat-donkeys-accept.md @@ -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) diff --git a/.changeset/new-cougars-collect.md b/.changeset/new-cougars-collect.md new file mode 100644 index 000000000..292c42057 --- /dev/null +++ b/.changeset/new-cougars-collect.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/alert": patch +"@nextui-org/theme": patch +--- + +Alert styles improved diff --git a/.changeset/plenty-scissors-love.md b/.changeset/plenty-scissors-love.md new file mode 100644 index 000000000..6c1b85df7 --- /dev/null +++ b/.changeset/plenty-scissors-love.md @@ -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 diff --git a/.changeset/polite-mails-kneel.md b/.changeset/polite-mails-kneel.md new file mode 100644 index 000000000..4dfa723e4 --- /dev/null +++ b/.changeset/polite-mails-kneel.md @@ -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 diff --git a/.changeset/pretty-parrots-guess.md b/.changeset/pretty-parrots-guess.md new file mode 100644 index 000000000..444998fd5 --- /dev/null +++ b/.changeset/pretty-parrots-guess.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/system": patch +--- + +Add reducedMotion setting to Provider (#3395) diff --git a/.changeset/proud-chicken-impress.md b/.changeset/proud-chicken-impress.md new file mode 100644 index 000000000..123e5647a --- /dev/null +++ b/.changeset/proud-chicken-impress.md @@ -0,0 +1,7 @@ +--- +"@nextui-org/autocomplete": patch +"@nextui-org/listbox": patch +"@nextui-org/theme": patch +--- + +Virtualization support added to Listbox & Autocomplete diff --git a/.changeset/purple-berries-play.md b/.changeset/purple-berries-play.md new file mode 100644 index 000000000..cd3773e8b --- /dev/null +++ b/.changeset/purple-berries-play.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/form": patch +--- + +add form component diff --git a/.changeset/red-camels-build.md b/.changeset/red-camels-build.md new file mode 100644 index 000000000..14c845735 --- /dev/null +++ b/.changeset/red-camels-build.md @@ -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 diff --git a/.changeset/selfish-baboons-know.md b/.changeset/selfish-baboons-know.md new file mode 100644 index 000000000..38ceb57b9 --- /dev/null +++ b/.changeset/selfish-baboons-know.md @@ -0,0 +1,7 @@ +--- +"@nextui-org/alert": patch +"@nextui-org/theme": patch +"@nextui-org/shared-icons": patch +--- + +Alert design improved diff --git a/.changeset/sharp-pianos-pump.md b/.changeset/sharp-pianos-pump.md new file mode 100644 index 000000000..4a8c5c6d8 --- /dev/null +++ b/.changeset/sharp-pianos-pump.md @@ -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 diff --git a/.changeset/silly-candles-wonder.md b/.changeset/silly-candles-wonder.md new file mode 100644 index 000000000..b7d07f6a4 --- /dev/null +++ b/.changeset/silly-candles-wonder.md @@ -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 diff --git a/.changeset/sixty-ties-knock.md b/.changeset/sixty-ties-knock.md new file mode 100644 index 000000000..e8046181a --- /dev/null +++ b/.changeset/sixty-ties-knock.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/alert": patch +"@nextui-org/theme": patch +--- + +Alert compoentn styles improved diff --git a/.changeset/slow-paws-punch.md b/.changeset/slow-paws-punch.md index 8bffd7150..bbfe4c146 100644 --- a/.changeset/slow-paws-punch.md +++ b/.changeset/slow-paws-punch.md @@ -1,5 +1,5 @@ --- -"@nextui-org/popover": minor +"@nextui-org/popover": patch --- added `shouldCloseOnScroll` to control the popover closing on scroll (#3594) diff --git a/.changeset/sour-bikes-burn.md b/.changeset/sour-bikes-burn.md new file mode 100644 index 000000000..b3938dd88 --- /dev/null +++ b/.changeset/sour-bikes-burn.md @@ -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 diff --git a/.changeset/spotty-flies-jump.md b/.changeset/spotty-flies-jump.md new file mode 100644 index 000000000..07cb52395 --- /dev/null +++ b/.changeset/spotty-flies-jump.md @@ -0,0 +1,7 @@ +--- +"@nextui-org/input-otp": patch +"@nextui-org/theme": patch +"@nextui-org/react": patch +--- + +Adding new input-otp component. diff --git a/.changeset/spotty-spies-call.md b/.changeset/spotty-spies-call.md new file mode 100644 index 000000000..d7d7ae3f3 --- /dev/null +++ b/.changeset/spotty-spies-call.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Fix Controlled IsInvalid Prop In Select diff --git a/.changeset/tame-planes-think.md b/.changeset/tame-planes-think.md new file mode 100644 index 000000000..5a07e601c --- /dev/null +++ b/.changeset/tame-planes-think.md @@ -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 diff --git a/.changeset/ten-paws-relate.md b/.changeset/ten-paws-relate.md new file mode 100644 index 000000000..45bc71353 --- /dev/null +++ b/.changeset/ten-paws-relate.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/popover": patch +--- + +Fix: element.ref was removed in React 19 diff --git a/.changeset/tender-buses-sort.md b/.changeset/tender-buses-sort.md new file mode 100644 index 000000000..c9d0c282f --- /dev/null +++ b/.changeset/tender-buses-sort.md @@ -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 diff --git a/.changeset/tiny-laws-cheer.md b/.changeset/tiny-laws-cheer.md new file mode 100644 index 000000000..9c8bae454 --- /dev/null +++ b/.changeset/tiny-laws-cheer.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/system": patch +--- + +align `navigate` function parameters with `@react-aria` diff --git a/.changeset/tough-brooms-hunt.md b/.changeset/tough-brooms-hunt.md new file mode 100644 index 000000000..3fc607731 --- /dev/null +++ b/.changeset/tough-brooms-hunt.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Fix the label placement when the `Select` has a `placeholder` or `description`. diff --git a/.changeset/twelve-trains-smile.md b/.changeset/twelve-trains-smile.md new file mode 100644 index 000000000..68359994d --- /dev/null +++ b/.changeset/twelve-trains-smile.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +making input and select styling consistent(#3876) diff --git a/.changeset/wild-jobs-explain.md b/.changeset/wild-jobs-explain.md index 4ae192963..452efb9b2 100644 --- a/.changeset/wild-jobs-explain.md +++ b/.changeset/wild-jobs-explain.md @@ -2,4 +2,4 @@ "@nextui-org/use-image": patch --- -fix Image ReferenceError in SSR \ No newline at end of file +fix Image ReferenceError in SSR diff --git a/.github/workflows/pre-release.yaml b/.github/workflows/pre-release.yaml index f00f00972..a228af8a3 100644 --- a/.github/workflows/pre-release.yaml +++ b/.github/workflows/pre-release.yaml @@ -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 diff --git a/.github/workflows/update-stats.yml b/.github/workflows/update-stats.yml new file mode 100644 index 000000000..3ea0fd481 --- /dev/null +++ b/.github/workflows/update-stats.yml @@ -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 }} diff --git a/.gitignore b/.gitignore index 9fca9efca..69a0d91f5 100644 --- a/.gitignore +++ b/.gitignore @@ -56,6 +56,7 @@ packages/**/*.backup.ts # ignore sitemap apps/**/sitemap.xml +apps/**/sitemap-0.xml # turbo .turbo diff --git a/.vscode/settings.json b/.vscode/settings.json index c531e733d..6b36bf07d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,5 +10,5 @@ }, "tailwindCSS.experimental.classRegex": [ ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"] - ] + ], } diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json index f2f02770e..bf12dab1c 100644 --- a/apps/docs/.eslintrc.json +++ b/apps/docs/.eslintrc.json @@ -22,10 +22,6 @@ { "files": ["*.ts", "*.tsx"], "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} } ] } diff --git a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx index 2023d8aee..2ca4108f9 100644 --- a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx +++ b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx @@ -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; export const ReactLiveDemo: React.FC = ({ diff --git a/apps/docs/components/docs/components/code-demo/utils.ts b/apps/docs/components/docs/components/code-demo/utils.ts index 6072975ef..49caef306 100644 --- a/apps/docs/components/docs/components/code-demo/utils.ts +++ b/apps/docs/components/docs/components/code-demo/utils.ts @@ -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() to cleanedCode if has const App = () => { if (cleanedCode.includes(`const App = () => {`)) { diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx index 4e946c99c..e68b99f94 100644 --- a/apps/docs/components/docs/components/codeblock.tsx +++ b/apps/docs/components/docs/components/codeblock.tsx @@ -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( {...props} > {({className, style, tokens, getLineProps, getTokenProps}) => ( -
    - 
    -              {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 (
-                  
    (
                         "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 && (
-                      {i + 1}
+                      = 10 ? "mr-4" : "",
+                          i + 1 >= 100 ? "mr-2" : "",
+                          i + 1 >= 1000 ? "mr-0" : "",
+                        )}
+                      >
+                        {i + 1}
+                      
                     )}
-                    {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 ? (
+                        
+                          {token.folderContent?.map((folderTokens) => {
+                            return folderTokens.map((token, index) => {
+                              // Hack for wrap line
+                              return token.content === "" ? (
+                                
    
+                              ) : (
+                                {token.content}
+                              );
+                            });
+                          })}
+                        
+                      ) : (
                          {
@@ -201,11 +245,29 @@ const Codeblock = forwardRef(
                         />
                       );
                     })}
-                  
    
+                  
                 );
-              })}
-
    -
    + }; + const renderFolderTokens = (tokens: TransformTokensTypes[][]) => { + return tokens.map((token, key) => { + const index = key + folderLine.index! + 1; + + return renderLine(token, index); + }); + }; + + return isFolder ? ( +
    + + {renderLine(folderLine.summaryContent as any, folderLine.index!, "span")} + + {renderFolderTokens(folderLine.folderContent as any)} +
    + ) : ( + renderLine(line, folderLine.index!) + ); + })} + )} ); diff --git a/apps/docs/components/docs/components/helper.ts b/apps/docs/components/docs/components/helper.ts new file mode 100644 index 000000000..451c10613 --- /dev/null +++ b/apps/docs/components/docs/components/helper.ts @@ -0,0 +1,189 @@ +import type Highlight from "prism-react-renderer"; + +export type TransformTokens = Parameters[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; +} diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx index 94c107bf9..f79e258d0 100644 --- a/apps/docs/components/docs/sidebar.tsx +++ b/apps/docs/components/docs/sidebar.tsx @@ -172,7 +172,7 @@ function TreeItem(props: TreeItemProps) { {isUpdated && ( (props: TreeItemProps) { 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(props: CollectionBase & Expandable & Multiple return ( diff --git a/apps/docs/components/footer.tsx b/apps/docs/components/footer.tsx index 35cdc519b..6b5e9b630 100644 --- a/apps/docs/components/footer.tsx +++ b/apps/docs/components/footer.tsx @@ -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 (

    © {getCurrentYear()} NextUI Inc. All rights reserved.

    + {isDocs ? ( +
    + + + + + + + + + +
    + ) : null}
    ); diff --git a/apps/docs/components/icons/moon.tsx b/apps/docs/components/icons/moon.tsx index b2ea9d37d..5e0c7a80c 100644 --- a/apps/docs/components/icons/moon.tsx +++ b/apps/docs/components/icons/moon.tsx @@ -11,7 +11,7 @@ export const MoonIcon = ({size = 24, width, height, ...props}: IconSvgProps) => {...props} > diff --git a/apps/docs/components/icons/sun.tsx b/apps/docs/components/icons/sun.tsx index 886aa1344..f1d7446c6 100644 --- a/apps/docs/components/icons/sun.tsx +++ b/apps/docs/components/icons/sun.tsx @@ -16,3 +16,29 @@ export const SunFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps ); + +export const SunLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => ( + +); diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx index b9a3c43cf..78663d467 100644 --- a/apps/docs/components/mdx-components.tsx +++ b/apps/docs/components/mdx-components.tsx @@ -153,7 +153,12 @@ const Code = ({ }); }} > - + ); }; diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx index e5543687b..478c0f2d9 100644 --- a/apps/docs/components/navbar.tsx +++ b/apps/docs/components/navbar.tsx @@ -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 = ({children, routes, mobileRoutes = [], sl const searchButton = ( ); @@ -238,35 +243,9 @@ export const Navbar: FC = ({children, routes, mobileRoutes = [], sl Figma - {/* hide feedback and changelog at this moment */} - {/* - - - - - - - - - */} - {/* - handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")} - > - Introducing v2.2.0  - - 🚀 - - - */} @@ -276,14 +255,18 @@ export const Navbar: FC = ({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)} > - + + )} + + ); +} diff --git a/apps/docs/content/components/alert/controlled.ts b/apps/docs/content/components/alert/controlled.ts index 3a4780f3e..2c3f0cacb 100644 --- a/apps/docs/content/components/alert/controlled.ts +++ b/apps/docs/content/components/alert/controlled.ts @@ -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 ( -
    - {isVisible ? ( - setIsVisible(false)} - /> - ) : ( - - )} -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/custom-impl.raw.jsx b/apps/docs/content/components/alert/custom-impl.raw.jsx new file mode 100644 index 000000000..a541c7481 --- /dev/null +++ b/apps/docs/content/components/alert/custom-impl.raw.jsx @@ -0,0 +1,124 @@ +import React, {forwardRef, useMemo} from "react"; +import {useAlert} from "@nextui-org/react"; + +export const InfoCircleIcon = (props) => { + return ( + + + + ); +}; + +export const CloseIcon = (props) => { + return ( + + ); +}; + +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 ( +
    + {title &&
    {title}
    } +
    {description}
    +
    + ); + }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]); + + const baseWrapper = useMemo(() => { + return isVisible ? ( +
    + + {mainWrapper} + {(isClosable || onClose) && ( + + )} +
    + ) : null; + }, [ + mainWrapper, + isClosable, + getCloseButtonProps, + isVisible, + domRef, + getBaseProps, + handleClose, + color, + onClose, + getAlertIconProps, + ]); + + return <>{baseWrapper}; +}); + +MyAlert.displayName = "MyAlert"; + +export default MyAlert; diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts index 9f5a2c70a..ab37512ce 100644 --- a/apps/docs/content/components/alert/custom-impl.ts +++ b/apps/docs/content/components/alert/custom-impl.ts @@ -1,140 +1,7 @@ -const InfoCircleIcon = `export const InfoCircleIcon = (props) => ( - - - -);`; - -const CloseIcon = `export const CloseIcon = (props) => ( - -);`; - -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 ( -
    - {title &&
    {title}
    } -
    {description}
    -
    - ); - }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]); - - const baseWrapper = useMemo(() => { - return isVisible ? ( -
    - - {mainWrapper} - {(isClosable || onClose) && ( - - )} -
    - ) : 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 { diff --git a/apps/docs/content/components/alert/custom-styles.raw.jsx b/apps/docs/content/components/alert/custom-styles.raw.jsx new file mode 100644 index 000000000..8291720ae --- /dev/null +++ b/apps/docs/content/components/alert/custom-styles.raw.jsx @@ -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 ( + + {children} + + ); + }, +); + +CustomAlert.displayName = "CustomAlert"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + +
    + + +
    +     + ))} +
    + ); +} diff --git a/apps/docs/content/components/alert/custom-styles.raw.tsx b/apps/docs/content/components/alert/custom-styles.raw.tsx new file mode 100644 index 000000000..6ef55f3ea --- /dev/null +++ b/apps/docs/content/components/alert/custom-styles.raw.tsx @@ -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 ( + + {children} + + ); +}; + +CustomAlert.displayName = "CustomAlert"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"] as any; + + return ( +
    + {colors.map((color) => ( + +
    + + +
    +     + ))} +
    + ); +} diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts index b2c5fb17d..29cf5fd0e 100644 --- a/apps/docs/content/components/alert/custom-styles.ts +++ b/apps/docs/content/components/alert/custom-styles.ts @@ -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 ( -
    - -
    - ); -}`; +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, }; diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts index 1be9439d7..22f51775f 100644 --- a/apps/docs/content/components/alert/index.ts +++ b/apps/docs/content/components/alert/index.ts @@ -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, }; diff --git a/apps/docs/content/components/alert/radius.raw.jsx b/apps/docs/content/components/alert/radius.raw.jsx new file mode 100644 index 000000000..07b2f9c5a --- /dev/null +++ b/apps/docs/content/components/alert/radius.raw.jsx @@ -0,0 +1,15 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + return ( +
    +
    + {["none", "sm", "md", "lg", "full"].map((radius) => ( +
    + +
    + ))} +
    +
    + ); +} diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts index abbf3f5f5..7b78db1ce 100644 --- a/apps/docs/content/components/alert/radius.ts +++ b/apps/docs/content/components/alert/radius.ts @@ -1,21 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - return ( -
    -
    - {["none", "sm", "md", "lg", "full"].map((radius) => ( -
    - -
    - ))} -
    -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/usage.raw.jsx b/apps/docs/content/components/alert/usage.raw.jsx new file mode 100644 index 000000000..3b5a727e9 --- /dev/null +++ b/apps/docs/content/components/alert/usage.raw.jsx @@ -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 ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts index 654352689..1118304c3 100644 --- a/apps/docs/content/components/alert/usage.ts +++ b/apps/docs/content/components/alert/usage.ts @@ -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 ( -
    - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/variants.raw.jsx b/apps/docs/content/components/alert/variants.raw.jsx new file mode 100644 index 000000000..1bb83af6b --- /dev/null +++ b/apps/docs/content/components/alert/variants.raw.jsx @@ -0,0 +1,16 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + return ( +
    + {["solid", "bordered", "flat", "faded"].map((variant) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/alert/variants.ts b/apps/docs/content/components/alert/variants.ts index 637553b08..ddea95fb2 100644 --- a/apps/docs/content/components/alert/variants.ts +++ b/apps/docs/content/components/alert/variants.ts @@ -1,20 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - A solid variant alert - - - A bordered variant alert - - - A flat variant alert - -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/with-action.raw.jsx b/apps/docs/content/components/alert/with-action.raw.jsx new file mode 100644 index 000000000..8e4ee60a8 --- /dev/null +++ b/apps/docs/content/components/alert/with-action.raw.jsx @@ -0,0 +1,19 @@ +import {Alert, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Upgrade + + } + title="You have no credits left" + variant="faded" + /> +
    + ); +} diff --git a/apps/docs/content/components/alert/with-action.ts b/apps/docs/content/components/alert/with-action.ts new file mode 100644 index 000000000..1bb611e21 --- /dev/null +++ b/apps/docs/content/components/alert/with-action.ts @@ -0,0 +1,9 @@ +import App from "./with-action.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/alert/with-icon.raw.jsx b/apps/docs/content/components/alert/with-icon.raw.jsx new file mode 100644 index 000000000..831e78982 --- /dev/null +++ b/apps/docs/content/components/alert/with-icon.raw.jsx @@ -0,0 +1,33 @@ +import {Alert} from "@nextui-org/react"; + +const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + + + ); +}; + +export default function App() { + return }>An alert with a custom icon; +} diff --git a/apps/docs/content/components/alert/with-icon.ts b/apps/docs/content/components/alert/with-icon.ts index dd722fe63..ca7c79da7 100644 --- a/apps/docs/content/components/alert/with-icon.ts +++ b/apps/docs/content/components/alert/with-icon.ts @@ -1,49 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -const UserIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - - - - ); -}; - -export default function App() { - return ( - }>An alert with a custom icon - ); -}`; +import App from "./with-icon.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/without-icon.raw.jsx b/apps/docs/content/components/alert/without-icon.raw.jsx new file mode 100644 index 000000000..bd25d413e --- /dev/null +++ b/apps/docs/content/components/alert/without-icon.raw.jsx @@ -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 ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/alert/without-icon.ts b/apps/docs/content/components/alert/without-icon.ts new file mode 100644 index 000000000..3c177c66b --- /dev/null +++ b/apps/docs/content/components/alert/without-icon.ts @@ -0,0 +1,9 @@ +import App from "./without-icon.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.jsx b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx new file mode 100644 index 000000000..2e25aaa5b --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx @@ -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 ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.tsx b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx new file mode 100644 index 000000000..8f88d88bc --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx @@ -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({ + 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 ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-filtering.ts b/apps/docs/content/components/autocomplete/async-filtering.ts index 308bc843b..6bcbb952f 100644 --- a/apps/docs/content/components/autocomplete/async-filtering.ts +++ b/apps/docs/content/components/autocomplete/async-filtering.ts @@ -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 ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; - -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({ - 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 ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; +import App from "./async-filtering.raw.jsx?raw"; +import AppTs from "./async-filtering.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx new file mode 100644 index 000000000..f7d810e3e --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx @@ -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 ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx new file mode 100644 index 000000000..4f9816110 --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx @@ -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([]); + 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 ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-loading-items.ts b/apps/docs/content/components/autocomplete/async-loading-items.ts index 495c845eb..a69188c56 100644 --- a/apps/docs/content/components/autocomplete/async-loading-items.ts +++ b/apps/docs/content/components/autocomplete/async-loading-items.ts @@ -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([]); - 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 ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; +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 { diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx new file mode 100644 index 000000000..084f46d6c --- /dev/null +++ b/apps/docs/content/components/autocomplete/colors.raw.jsx @@ -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 ( +
    + {colors.map((color) => ( + + {(item) => {item.label}} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/colors.ts b/apps/docs/content/components/autocomplete/colors.ts index 1ac3ba007..d5bef810a 100644 --- a/apps/docs/content/components/autocomplete/colors.ts +++ b/apps/docs/content/components/autocomplete/colors.ts @@ -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 ( -
    - {colors.map((color) => ( - - {(item) => {item.label}} - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx new file mode 100644 index 000000000..084f46d6c --- /dev/null +++ b/apps/docs/content/components/autocomplete/controlled.raw.jsx @@ -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 ( +
    + {colors.map((color) => ( + + {(item) => {item.label}} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx new file mode 100644 index 000000000..ac696fb0f --- /dev/null +++ b/apps/docs/content/components/autocomplete/controlled.raw.tsx @@ -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("cat"); + + return ( +
    + + {(item) => {item.label}} + +

    Selected: {key}

    +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/controlled.ts b/apps/docs/content/components/autocomplete/controlled.ts index f8a35ea4a..1f1a36336 100644 --- a/apps/docs/content/components/autocomplete/controlled.ts +++ b/apps/docs/content/components/autocomplete/controlled.ts @@ -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("cat"); - - return ( -
    - - {(item) => {item.label}} - -

    Selected: {value}

    -
    - ); -}`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState("cat"); - - return ( -
    - - {(item) => {item.label}} - -

    Selected: {value}

    -
    - ); -}`; +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 { diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx new file mode 100644 index 000000000..822f4838c --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx @@ -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 ( +
    + + {(item) => {item.label}} + +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts index 7e7e27dcc..b88aaeea2 100644 --- a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts @@ -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 ( -
    - - {(item) => {item.label}} - -
    - ); -}`; +import App from "./custom-empty-content-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx new file mode 100644 index 000000000..afb078261 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx @@ -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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx new file mode 100644 index 000000000..38b444f84 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx @@ -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: string, inputValue: string) => { + 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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-filtering.ts b/apps/docs/content/components/autocomplete/custom-filtering.ts index 5ebcd8336..22640a188 100644 --- a/apps/docs/content/components/autocomplete/custom-filtering.ts +++ b/apps/docs/content/components/autocomplete/custom-filtering.ts @@ -1,95 +1,8 @@ -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 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 ( - - {(item) => {item.label}} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const myFilter = (textValue: string, inputValue: string) => { - 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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./custom-filtering.raw.jsx?raw"; +import AppTs from "./custom-filtering.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { diff --git a/apps/docs/content/components/autocomplete/custom-items.raw.jsx b/apps/docs/content/components/autocomplete/custom-items.raw.jsx new file mode 100644 index 000000000..2f2b27f9e --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-items.raw.jsx @@ -0,0 +1,229 @@ +import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + {(user) => ( + +
    + +
    + {user.name} + {user.email} +
    +
    +     + )} +     + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-items.ts b/apps/docs/content/components/autocomplete/custom-items.ts index 205ead3a5..26a1e0f9a 100644 --- a/apps/docs/content/components/autocomplete/custom-items.ts +++ b/apps/docs/content/components/autocomplete/custom-items.ts @@ -1,237 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - {(user) => ( - -
    - -
    - {user.name} - {user.email} -
    -
    -     - )} -     - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx new file mode 100644 index 000000000..7d4f300b0 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx @@ -0,0 +1,49 @@ +import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; + +export default function App() { + const headingClasses = + "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; + + return ( + + + Lion + Tiger + Elephant + Kangaroo + Panda + Giraffe + Zebra + Cheetah + + + Eagle + Parrot + Penguin + Ostrich + Peacock + Swan + Falcon + Flamingo + + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.ts b/apps/docs/content/components/autocomplete/custom-sections-style.ts index 13770de8a..9ba8a6cd9 100644 --- a/apps/docs/content/components/autocomplete/custom-sections-style.ts +++ b/apps/docs/content/components/autocomplete/custom-sections-style.ts @@ -1,51 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; - -export default function App() { - const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; - - return ( - - - Lion - Tiger - Elephant - Kangaroo - Panda - Giraffe - Zebra - Cheetah - - - Eagle - Parrot - Penguin - Ostrich - Peacock - Swan - Falcon - Flamingo - - - ); -}`; +import App from "./custom-sections-style.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx new file mode 100644 index 000000000..21620cb3f --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx @@ -0,0 +1,68 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const SelectorIcon = (props) => { + return ( + + ); +}; + +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 ( + } + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.ts b/apps/docs/content/components/autocomplete/custom-selector-icon.ts index 2fc1f523b..ee2c7d9a8 100644 --- a/apps/docs/content/components/autocomplete/custom-selector-icon.ts +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.ts @@ -1,76 +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 SelectorIcon = `export const SelectorIcon = (props) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {SelectorIcon} from "./SelectorIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - } - > - {(item) => {item.label}} - - ); -}`; +import App from "./custom-selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-styles.raw.jsx b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx new file mode 100644 index 000000000..2727c2a25 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx @@ -0,0 +1,303 @@ +import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; + +const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => { + return ( + + ); +}; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + } + variant="bordered" + > + {(item) => ( + +
    +
    + +
    + {item.name} + {item.team} +
    +
    + +
    +     + )} +     + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-styles.ts b/apps/docs/content/components/autocomplete/custom-styles.ts index 878276698..da3ea9093 100644 --- a/apps/docs/content/components/autocomplete/custom-styles.ts +++ b/apps/docs/content/components/autocomplete/custom-styles.ts @@ -1,317 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const SearchIcon = `export const SearchIcon = ({ - size = 24, - strokeWidth = 1.5, - width, - height, - ...props -}) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; -import {users} from "./data"; - -export default function App() { - return ( - } - radius="full" - variant="bordered" - > - {(item) => ( - -
    -
    - -
    - {item.name} - {item.team} -
    -
    - -
    -     - )} -     - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-value.raw.jsx b/apps/docs/content/components/autocomplete/custom-value.raw.jsx new file mode 100644 index 000000000..ec46f43f0 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-value.raw.jsx @@ -0,0 +1,43 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-value.ts b/apps/docs/content/components/autocomplete/custom-value.ts index ef17993ac..a3d01f165 100644 --- a/apps/docs/content/components/autocomplete/custom-value.ts +++ b/apps/docs/content/components/autocomplete/custom-value.ts @@ -1,51 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./custom-value.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/description.raw.jsx b/apps/docs/content/components/autocomplete/description.raw.jsx new file mode 100644 index 000000000..d8f7e5bba --- /dev/null +++ b/apps/docs/content/components/autocomplete/description.raw.jsx @@ -0,0 +1,44 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/description.ts b/apps/docs/content/components/autocomplete/description.ts index 17947b282..aeb6340b6 100644 --- a/apps/docs/content/components/autocomplete/description.ts +++ b/apps/docs/content/components/autocomplete/description.ts @@ -1,52 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx new file mode 100644 index 000000000..8b90a1f04 --- /dev/null +++ b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx @@ -0,0 +1,43 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/disabled-items.ts b/apps/docs/content/components/autocomplete/disabled-items.ts index caa7c6325..4ff907eed 100644 --- a/apps/docs/content/components/autocomplete/disabled-items.ts +++ b/apps/docs/content/components/autocomplete/disabled-items.ts @@ -1,51 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./disabled-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/disabled.raw.jsx b/apps/docs/content/components/autocomplete/disabled.raw.jsx new file mode 100644 index 000000000..5524c3850 --- /dev/null +++ b/apps/docs/content/components/autocomplete/disabled.raw.jsx @@ -0,0 +1,44 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/disabled.ts b/apps/docs/content/components/autocomplete/disabled.ts index 4642caaa3..1a215cc91 100644 --- a/apps/docs/content/components/autocomplete/disabled.ts +++ b/apps/docs/content/components/autocomplete/disabled.ts @@ -1,52 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx new file mode 100644 index 000000000..02d854ca3 --- /dev/null +++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx @@ -0,0 +1,42 @@ +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 ( + + {(animal) => {animal.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/dynamic.ts b/apps/docs/content/components/autocomplete/dynamic.ts index d24de783b..5d3c97bb9 100644 --- a/apps/docs/content/components/autocomplete/dynamic.ts +++ b/apps/docs/content/components/autocomplete/dynamic.ts @@ -1,50 +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 ( - - {(animal) => {animal.label}} - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/error-message.raw.jsx b/apps/docs/content/components/autocomplete/error-message.raw.jsx new file mode 100644 index 000000000..fa9082e48 --- /dev/null +++ b/apps/docs/content/components/autocomplete/error-message.raw.jsx @@ -0,0 +1,54 @@ +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(""); + const [touched, setTouched] = React.useState(false); + + const isValid = key === "cat"; + + return ( + setTouched(true)} + onSelectionChange={setValue} + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/error-message.ts b/apps/docs/content/components/autocomplete/error-message.ts index 4f703637d..fb8101b13 100644 --- a/apps/docs/content/components/autocomplete/error-message.ts +++ b/apps/docs/content/components/autocomplete/error-message.ts @@ -1,62 +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 [value, setValue] = React.useState(""); - const [touched, setTouched] = React.useState(false); - - const isValid = value === "cat"; - - return ( - setTouched(true)} - > - {(item) => {item.label}} - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx new file mode 100644 index 000000000..b54015518 --- /dev/null +++ b/apps/docs/content/components/autocomplete/events.raw.jsx @@ -0,0 +1,60 @@ +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 [value, setValue] = React.useState(""); + const [selectedKey, setSelectedKey] = React.useState(null); + + const onSelectionChange = (id) => { + setSelectedKey(id); + }; + + const onInputChange = (value) => { + setValue(value); + }; + + return ( +
    + + {(item) => {item.label}} + +

    Current selected animal: {selectedKey}

    +

    Current input text: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/events.raw.tsx b/apps/docs/content/components/autocomplete/events.raw.tsx new file mode 100644 index 000000000..4e0c01fd5 --- /dev/null +++ b/apps/docs/content/components/autocomplete/events.raw.tsx @@ -0,0 +1,61 @@ +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 [value, setValue] = React.useState(""); + const [selectedKey, setSelectedKey] = React.useState(null); + + const onSelectionChange = (key: React.Key | null) => { + setSelectedKey(key); + }; + + const onInputChange = (value: string) => { + setValue(value); + }; + + return ( +
    + + {(item) => {item.label}} + +

    Current selected animal: {selectedKey}

    +

    Current input text: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/events.ts b/apps/docs/content/components/autocomplete/events.ts index 1983ff3fa..eec42f694 100644 --- a/apps/docs/content/components/autocomplete/events.ts +++ b/apps/docs/content/components/autocomplete/events.ts @@ -1,110 +1,11 @@ -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 [value, setValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(null); - - const onSelectionChange = (id) => { - setSelectedKey(id); - }; - - const onInputChange = (value) => { - setValue(value) - }; - - return ( -
    - - {(item) => {item.label}} - -

    Current selected animal: {selectedKey}

    -

    Current input text: {value}

    -
    - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(null); - - const onSelectionChange = (key: React.Key) => { - setSelectedKey(key); - }; - - const onInputChange = (value: string) => { - setValue(value) - }; - - return ( -
    - - {(item) => {item.label}} - -

    Current selected animal: {selectedKey}

    -

    Current input text: {value}

    -
    - ); -}`; +import App from "./events.raw.jsx?raw"; +import AppTs from "./events.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, -}; - -const reactTs = { "/App.tsx": AppTs, }; export default { ...react, - ...reactTs, }; diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx new file mode 100644 index 000000000..6b0049e68 --- /dev/null +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx @@ -0,0 +1,96 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; + +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() { + // Store Autocomplete input value, selected option, open state, and items + // in a state tracker + const [fieldState, setFieldState] = React.useState({ + selectedKey: "", + inputValue: "", + items: animals, + }); + + // Implement custom filtering logic and control what items are + // available to the Autocomplete. + const {startsWith} = useFilter({sensitivity: "base"}); + + // Specify how each of the Autocomplete values should change when an + // option is selected from the list box + const onSelectionChange = (key) => { + setFieldState((prevState) => { + let selectedItem = prevState.items.find((option) => option.value === key); + + return { + inputValue: selectedItem?.label || "", + selectedKey: key, + items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), + }; + }); + }; + + // Specify how each of the Autocomplete values should change when the input + // field is altered by the user + const onInputChange = (value) => { + setFieldState((prevState) => ({ + inputValue: value, + selectedKey: value === "" ? null : prevState.selectedKey, + items: animals.filter((item) => startsWith(item.label, value)), + })); + }; + + // Show entire list if user opens the menu manually + const onOpenChange = (isOpen, menuTrigger) => { + if (menuTrigger === "manual" && isOpen) { + setFieldState((prevState) => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: animals, + })); + } + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx new file mode 100644 index 000000000..553ecf6e1 --- /dev/null +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; + +export type FieldState = { + selectedKey: React.Key | null; + inputValue: string; + items: typeof animals; +}; + +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() { + // Store Autocomplete input value, selected option, open state, and items + // in a state tracker + const [fieldState, setFieldState] = React.useState({ + selectedKey: "", + inputValue: "", + items: animals, + }); + + // Implement custom filtering logic and control what items are + // available to the Autocomplete. + const {startsWith} = useFilter({sensitivity: "base"}); + + // Specify how each of the Autocomplete values should change when an + // option is selected from the list box + const onSelectionChange = (key: React.Key | null) => { + setFieldState((prevState) => { + let selectedItem = prevState.items.find((option) => option.key === key); + + return { + inputValue: selectedItem?.label || "", + selectedKey: key, + items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), + }; + }); + }; + + // Specify how each of the Autocomplete values should change when the input + // field is altered by the user + const onInputChange = (value: string) => { + setFieldState((prevState) => ({ + inputValue: value, + selectedKey: value === "" ? null : prevState.selectedKey, + items: animals.filter((item) => startsWith(item.label, value)), + })); + }; + + // Show entire list if user opens the menu manually + const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => { + if (menuTrigger === "manual" && isOpen) { + setFieldState((prevState) => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: animals, + })); + } + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/fully-controlled.ts b/apps/docs/content/components/autocomplete/fully-controlled.ts index 9b969ba31..a32d21210 100644 --- a/apps/docs/content/components/autocomplete/fully-controlled.ts +++ b/apps/docs/content/components/autocomplete/fully-controlled.ts @@ -1,187 +1,11 @@ -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 {useFilter} from "@react-aria/i18n"; -import {animals} from "./data"; - -export default function App() { - // Store Autocomplete input value, selected option, open state, and items - // in a state tracker - const [fieldState, setFieldState] = React.useState({ - selectedKey: "", - inputValue: "", - items: animals, - }); - - // Implement custom filtering logic and control what items are - // available to the Autocomplete. - const {startsWith} = useFilter({sensitivity: "base"}); - - // Specify how each of the Autocomplete values should change when an - // option is selected from the list box - const onSelectionChange = (key) => { - setFieldState((prevState) => { - let selectedItem = prevState.items.find((option) => option.value === key); - - return { - inputValue: selectedItem?.label || "", - selectedKey: key, - items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), - }; - }); - }; - - // Specify how each of the Autocomplete values should change when the input - // field is altered by the user - const onInputChange = (value) => { - setFieldState((prevState) => ({ - inputValue: value, - selectedKey: value === "" ? null : prevState.selectedKey, - items: animals.filter((item) => startsWith(item.label, value)), - })); - }; - - // Show entire list if user opens the menu manually - const onOpenChange = (isOpen, menuTrigger) => { - if (menuTrigger === "manual" && isOpen) { - setFieldState((prevState) => ({ - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: animals, - })); - } - }; - - return ( - - {(item) => {item.label}} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react"; -import {useFilter} from "@react-aria/i18n"; -import {animals} from "./data"; - -type FieldState = { - selectedKey: React.Key | null; - inputValue: string; - items: typeof animals; -}; - -export default function App() { - // Store Autocomplete input value, selected option, open state, and items - // in a state tracker - const [fieldState, setFieldState] = React.useState({ - selectedKey: "", - inputValue: "", - items: animals, - }); - - // Implement custom filtering logic and control what items are - // available to the Autocomplete. - const {startsWith} = useFilter({sensitivity: "base"}); - - // Specify how each of the Autocomplete values should change when an - // option is selected from the list box - const onSelectionChange = (key: React.Key) => { - setFieldState((prevState) => { - let selectedItem = prevState.items.find((option) => option.value === key); - - return { - inputValue: selectedItem?.label || "", - selectedKey: key, - items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), - }; - }); - }; - - // Specify how each of the Autocomplete values should change when the input - // field is altered by the user - const onInputChange = (value: string) => { - setFieldState((prevState) => ({ - inputValue: value, - selectedKey: value === "" ? null : prevState.selectedKey, - items: animals.filter((item) => startsWith(item.label, value)), - })); - }; - - // Show entire list if user opens the menu manually - const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => { - if (menuTrigger === "manual" && isOpen) { - setFieldState((prevState) => ({ - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: animals, - })); - } - }; - - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./fully-controlled.raw.tsx?raw"; +import AppTs from "./fully-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, -}; - -const reactTs = { "/App.tsx": AppTs, }; export default { ...react, - ...reactTs, }; diff --git a/apps/docs/content/components/autocomplete/index.ts b/apps/docs/content/components/autocomplete/index.ts index 76d57925a..e57bde14d 100644 --- a/apps/docs/content/components/autocomplete/index.ts +++ b/apps/docs/content/components/autocomplete/index.ts @@ -26,6 +26,10 @@ import customSectionsStyle from "./custom-sections-style"; import customStyles from "./custom-styles"; import customEmptyContentMessage from "./custom-empty-content-message"; import readOnly from "./read-only"; +import virtualization from "./virtualization"; +import virtualizationTenThousand from "./virtualization-ten-thousand"; +import virtualizationMaxListboxHeight from "./virtualization-max-listbox-height"; +import virtualizationCustomItemHeight from "./virtualization-custom-item-height"; export const autocompleteContent = { usage, @@ -56,4 +60,8 @@ export const autocompleteContent = { customStyles, customEmptyContentMessage, readOnly, + virtualization, + virtualizationTenThousand, + virtualizationMaxListboxHeight, + virtualizationCustomItemHeight, }; diff --git a/apps/docs/content/components/autocomplete/item-start-content.raw.jsx b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx new file mode 100644 index 000000000..70468dd7b --- /dev/null +++ b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx @@ -0,0 +1,68 @@ +import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + + } + > + Argentina + + + } + > + Venezuela + + } + > + Brazil + + + } + > + Switzerland + + } + > + Germany + + } + > + Spain + + } + > + France + + } + > + Italy + + } + > + Mexico + + + ); +} diff --git a/apps/docs/content/components/autocomplete/item-start-content.ts b/apps/docs/content/components/autocomplete/item-start-content.ts index 02a9e14bd..294a22e6b 100644 --- a/apps/docs/content/components/autocomplete/item-start-content.ts +++ b/apps/docs/content/components/autocomplete/item-start-content.ts @@ -1,70 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - } - > - Argentina - - } - > - Venezuela - - } - > - Brazil - - - } - > - Switzerland - - } - > - Germany - - } - > - Spain - - } - > - France - - } - > - Italy - - } - > - Mexico - - - ); -}`; +import App from "./item-start-content.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/label-placements.raw.jsx b/apps/docs/content/components/autocomplete/label-placements.raw.jsx new file mode 100644 index 000000000..bc019062b --- /dev/null +++ b/apps/docs/content/components/autocomplete/label-placements.raw.jsx @@ -0,0 +1,72 @@ +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 placements = ["inside", "outside", "outside-left"]; + + return ( +
    +
    +

    Without placeholder

    +
    + {placements.map((placement) => ( + + {(item) => {item.label}} + + ))} +
    +
    +
    +

    With placeholder

    +
    + {placements.map((placement) => ( + + {animals.map((animal) => ( + {animal.label} + ))} + + ))} +
    +
    +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/label-placements.ts b/apps/docs/content/components/autocomplete/label-placements.ts index 391dba7ed..cd2a65d35 100644 --- a/apps/docs/content/components/autocomplete/label-placements.ts +++ b/apps/docs/content/components/autocomplete/label-placements.ts @@ -1,84 +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 placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
    -
    -

    Without placeholder

    -
    - {placements.map((placement) => ( - - {(item) => {item.label}} - - ))} -
    -
    -
    -

    With placeholder

    -
    - {placements.map((placement) => ( - - {animals.map((animal) => ( - - {animal.label} - - ))} - - ))} -
    -
    -
    - ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/read-only.raw.jsx b/apps/docs/content/components/autocomplete/read-only.raw.jsx new file mode 100644 index 000000000..2801df8ab --- /dev/null +++ b/apps/docs/content/components/autocomplete/read-only.raw.jsx @@ -0,0 +1,44 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/read-only.ts b/apps/docs/content/components/autocomplete/read-only.ts index 006d69b11..caf4be10c 100644 --- a/apps/docs/content/components/autocomplete/read-only.ts +++ b/apps/docs/content/components/autocomplete/read-only.ts @@ -1,52 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/required.raw.jsx b/apps/docs/content/components/autocomplete/required.raw.jsx new file mode 100644 index 000000000..5fa999c6e --- /dev/null +++ b/apps/docs/content/components/autocomplete/required.raw.jsx @@ -0,0 +1,44 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/required.ts b/apps/docs/content/components/autocomplete/required.ts index d30e1b054..b50b781e6 100644 --- a/apps/docs/content/components/autocomplete/required.ts +++ b/apps/docs/content/components/autocomplete/required.ts @@ -1,52 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/sections.raw.jsx b/apps/docs/content/components/autocomplete/sections.raw.jsx new file mode 100644 index 000000000..f78b06892 --- /dev/null +++ b/apps/docs/content/components/autocomplete/sections.raw.jsx @@ -0,0 +1,28 @@ +import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; + +export default function App() { + return ( + + + Lion + Tiger + Elephant + Kangaroo + Panda + Giraffe + Zebra + Cheetah + + + Eagle + Parrot + Penguin + Ostrich + Peacock + Swan + Falcon + Flamingo + + + ); +} diff --git a/apps/docs/content/components/autocomplete/sections.ts b/apps/docs/content/components/autocomplete/sections.ts index 09219558d..17cd360ea 100644 --- a/apps/docs/content/components/autocomplete/sections.ts +++ b/apps/docs/content/components/autocomplete/sections.ts @@ -1,35 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; - -export default function App() { - return ( - - - Lion - Tiger - Elephant - Kangaroo - Panda - Giraffe - Zebra - Cheetah - - - Eagle - Parrot - Penguin - Ostrich - Peacock - Swan - Falcon - Flamingo - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/sizes.raw.jsx b/apps/docs/content/components/autocomplete/sizes.raw.jsx new file mode 100644 index 000000000..31906647e --- /dev/null +++ b/apps/docs/content/components/autocomplete/sizes.raw.jsx @@ -0,0 +1,59 @@ +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 sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( +
    + + {(item) => {item.label}} + + + {(item) => {item.label}} + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/sizes.ts b/apps/docs/content/components/autocomplete/sizes.ts index 06acaf7e0..85a2f5b30 100644 --- a/apps/docs/content/components/autocomplete/sizes.ts +++ b/apps/docs/content/components/autocomplete/sizes.ts @@ -1,67 +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 sizes = ["sm", "md", "lg"]; - - return ( -
    - {sizes.map((size) => ( -
    - - {(item) => {item.label}} - - - {(item) => {item.label}} - -
    - ))} -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx new file mode 100644 index 000000000..58e526aaa --- /dev/null +++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx @@ -0,0 +1,81 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const PetIcon = (props) => { + return ( + + ); +}; + +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 ( + } + variant="bordered" + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/start-content.ts b/apps/docs/content/components/autocomplete/start-content.ts index 90ee37634..59191d72a 100644 --- a/apps/docs/content/components/autocomplete/start-content.ts +++ b/apps/docs/content/components/autocomplete/start-content.ts @@ -1,89 +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 PetIcon = `export const PetIcon = (props) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {PetIcon} from "./PetIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - } - defaultSelectedKey="cat" - className="max-w-xs" - > - {(item) => {item.label}} - - ); -}`; +import App from "./start-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PetIcon.jsx": PetIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/usage.raw.jsx b/apps/docs/content/components/autocomplete/usage.raw.jsx new file mode 100644 index 000000000..f95a67897 --- /dev/null +++ b/apps/docs/content/components/autocomplete/usage.raw.jsx @@ -0,0 +1,49 @@ +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 ( +
    + + {animals.map((animal) => ( + {animal.label} + ))} + + + {(item) => {item.label}} + +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/usage.ts b/apps/docs/content/components/autocomplete/usage.ts index ee0831fa2..1118304c3 100644 --- a/apps/docs/content/components/autocomplete/usage.ts +++ b/apps/docs/content/components/autocomplete/usage.ts @@ -1,62 +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 ( -
    - - {animals.map((animal) => ( - - {animal.label} - - ))} - - - {(item) => {item.label}} - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/variants.raw.jsx b/apps/docs/content/components/autocomplete/variants.raw.jsx new file mode 100644 index 000000000..a222f3afa --- /dev/null +++ b/apps/docs/content/components/autocomplete/variants.raw.jsx @@ -0,0 +1,60 @@ +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 variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    + + {(item) => {item.label}} + + + {animals.map((animal) => ( + {animal.label} + ))} + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/autocomplete/variants.ts b/apps/docs/content/components/autocomplete/variants.ts index f0c5c1210..ddea95fb2 100644 --- a/apps/docs/content/components/autocomplete/variants.ts +++ b/apps/docs/content/components/autocomplete/variants.ts @@ -1,70 +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 variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
    - {variants.map((variant) => ( -
    - - {(item) => {item.label}} - - - {animals.map((animal) => ( - - {animal.label} - - ))} - -
    - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts new file mode 100644 index 000000000..c3211acad --- /dev/null +++ b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts @@ -0,0 +1,65 @@ +const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const generateItems = (n) => { + const items = [ + "Cat", + "Dog", + "Elephant", + "Lion", + "Tiger", + "Giraffe", + "Dolphin", + "Penguin", + "Zebra", + "Shark", + "Whale", + "Otter", + "Crocodile", + ]; + + const dataset = []; + + for (let i = 0; i < n; i++) { + const item = items[i % items.length]; + + dataset.push({ + label: \`\${item}\${i}\`, + value: \`\${item.toLowerCase()}\${i}\`, + description: "Sample description", + }); + } + + return dataset; +}; + +export default function App() { + const items = generateItems(1000); + + return ( +
    + + {(item) => ( + + {item.label} + + )} + +
    + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts new file mode 100644 index 000000000..eb630f734 --- /dev/null +++ b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts @@ -0,0 +1,64 @@ +const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const generateItems = (n) => { + const items = [ + "Cat", + "Dog", + "Elephant", + "Lion", + "Tiger", + "Giraffe", + "Dolphin", + "Penguin", + "Zebra", + "Shark", + "Whale", + "Otter", + "Crocodile", + ]; + + const dataset = []; + + for (let i = 0; i < n; i++) { + const item = items[i % items.length]; + + dataset.push({ + label: \`\${item}\${i}\`, + value: \`\${item.toLowerCase()}\${i}\`, + description: "Sample description", + }); + } + + return dataset; +}; + +export default function App() { + const items = generateItems(1000); + + return ( +
    + + {(item) => ( + + {item.label} + + )} + +
    + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts new file mode 100644 index 000000000..1e45f238a --- /dev/null +++ b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts @@ -0,0 +1,63 @@ +const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const generateItems = (n) => { + const items = [ + "Cat", + "Dog", + "Elephant", + "Lion", + "Tiger", + "Giraffe", + "Dolphin", + "Penguin", + "Zebra", + "Shark", + "Whale", + "Otter", + "Crocodile", + ]; + + const dataset = []; + + for (let i = 0; i < n; i++) { + const item = items[i % items.length]; + + dataset.push({ + label: \`\${item}\${i}\`, + value: \`\${item.toLowerCase()}\${i}\`, + description: "Sample description", + }); + } + + return dataset; +}; + +export default function App() { + const items = generateItems(10000); + + return ( +
    + + {(item) => ( + + {item.label} + + )} + +
    + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/autocomplete/virtualization.ts b/apps/docs/content/components/autocomplete/virtualization.ts new file mode 100644 index 000000000..254a3072f --- /dev/null +++ b/apps/docs/content/components/autocomplete/virtualization.ts @@ -0,0 +1,63 @@ +const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const generateItems = (n) => { + const items = [ + "Cat", + "Dog", + "Elephant", + "Lion", + "Tiger", + "Giraffe", + "Dolphin", + "Penguin", + "Zebra", + "Shark", + "Whale", + "Otter", + "Crocodile", + ]; + + const dataset = []; + + for (let i = 0; i < n; i++) { + const item = items[i % items.length]; + + dataset.push({ + label: \`\${item}\${i}\`, + value: \`\${item.toLowerCase()}\${i}\`, + description: "Sample description", + }); + } + + return dataset; +}; + +export default function App() { + const items = generateItems(1000); + + return ( +
    + + {(item) => ( + + {item.label} + + )} + +
    + ); +}`; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx new file mode 100644 index 000000000..56e0385b1 --- /dev/null +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx @@ -0,0 +1,46 @@ +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 ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts index 43123ca2d..1cfe3080f 100644 --- a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts @@ -1,54 +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 ( - - {(item) => {item.label}} - - ); -}`; +import App from "./without-scroll-shadow.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/avatar/bordered.raw.jsx b/apps/docs/content/components/avatar/bordered.raw.jsx new file mode 100644 index 000000000..4c39afe10 --- /dev/null +++ b/apps/docs/content/components/avatar/bordered.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/bordered.ts b/apps/docs/content/components/avatar/bordered.ts index 0a6a75f97..4e025375c 100644 --- a/apps/docs/content/components/avatar/bordered.ts +++ b/apps/docs/content/components/avatar/bordered.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./bordered.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/colors.raw.jsx b/apps/docs/content/components/avatar/colors.raw.jsx new file mode 100644 index 000000000..8f64bc141 --- /dev/null +++ b/apps/docs/content/components/avatar/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/colors.ts b/apps/docs/content/components/avatar/colors.ts index d4bd93f4b..d5bef810a 100644 --- a/apps/docs/content/components/avatar/colors.ts +++ b/apps/docs/content/components/avatar/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/custom-fallback.raw.jsx b/apps/docs/content/components/avatar/custom-fallback.raw.jsx new file mode 100644 index 000000000..e9d7a1927 --- /dev/null +++ b/apps/docs/content/components/avatar/custom-fallback.raw.jsx @@ -0,0 +1,41 @@ +import {Avatar} from "@nextui-org/react"; + +export const CameraIcon = ({fill, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
    + + } + src="https://images.unsplash.com/broken" + /> + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/custom-fallback.ts b/apps/docs/content/components/avatar/custom-fallback.ts index 171ee43b4..24a9b3e8e 100644 --- a/apps/docs/content/components/avatar/custom-fallback.ts +++ b/apps/docs/content/components/avatar/custom-fallback.ts @@ -1,41 +1,7 @@ -const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...props}) => { - return ( - - - - ); -};`; - -const App = `import {Avatar} from "@nextui-org/react"; -import {CameraIcon} from './CameraIcon'; - -export default function App() { - return ( -
    - - } /> - - -
    - ); -}`; +import App from "./custom-fallback.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CameraIcon.jsx": CameraIcon, }; export default { diff --git a/apps/docs/content/components/avatar/custom-impl.raw.jsx b/apps/docs/content/components/avatar/custom-impl.raw.jsx new file mode 100644 index 000000000..af2b0ab08 --- /dev/null +++ b/apps/docs/content/components/avatar/custom-impl.raw.jsx @@ -0,0 +1,60 @@ +import {forwardRef, useMemo} from "react"; +import {AvatarIcon, useAvatar} from "@nextui-org/react"; + +const MyAvatar = forwardRef((props, ref) => { + const { + src, + icon = , + alt, + classNames, + slots, + name, + showFallback, + fallback: fallbackComponent, + getInitials, + getAvatarProps, + getImageProps, + } = useAvatar({ + ref, + ...props, + }); + + const fallback = useMemo(() => { + if (!showFallback && src) return null; + + const ariaLabel = alt || name || "avatar"; + + if (fallbackComponent) { + return ( +
    + {fallbackComponent} +
    + ); + } + + return name ? ( + + {getInitials(name)} + + ) : ( + + {icon} + + ); + }, [showFallback, src, fallbackComponent, name, classNames]); + + return ( +
    + {src && {alt}} + {fallback} +
    + ); +}); + +MyAvatar.displayName = "MyAvatar"; + +export default MyAvatar; diff --git a/apps/docs/content/components/avatar/custom-impl.raw.tsx b/apps/docs/content/components/avatar/custom-impl.raw.tsx new file mode 100644 index 000000000..9cd0db925 --- /dev/null +++ b/apps/docs/content/components/avatar/custom-impl.raw.tsx @@ -0,0 +1,62 @@ +import {forwardRef, useMemo} from "react"; +import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react"; + +export interface AvatarProps extends BaseAvatarProps {} + +const MyAvatar = forwardRef((props, ref) => { + const { + src, + icon = , + alt, + classNames, + slots, + name, + showFallback, + fallback: fallbackComponent, + getInitials, + getAvatarProps, + getImageProps, + } = useAvatar({ + ref, + ...props, + }); + + const fallback = useMemo(() => { + if (!showFallback && src) return null; + + const ariaLabel = alt || name || "avatar"; + + if (fallbackComponent) { + return ( +
    + {fallbackComponent} +
    + ); + } + + return name ? ( + + {getInitials(name)} + + ) : ( + + {icon} + + ); + }, [showFallback, src, fallbackComponent, name, classNames]); + + return ( +
    + {src && {alt}} + {fallback} +
    + ); +}); + +MyAvatar.displayName = "MyAvatar"; + +export default MyAvatar; diff --git a/apps/docs/content/components/avatar/custom-impl.ts b/apps/docs/content/components/avatar/custom-impl.ts index 5a0c2e9ca..ef0d8ef53 100644 --- a/apps/docs/content/components/avatar/custom-impl.ts +++ b/apps/docs/content/components/avatar/custom-impl.ts @@ -1,129 +1,5 @@ -const App = `import {forwardRef} from "react"; -import {useMemo} from "react"; - -import {AvatarIcon, useAvatar} from "@nextui-org/react"; - -const MyAvatar = forwardRef((props, ref) => { - const { - src, - icon = , - alt, - classNames, - slots, - name, - showFallback, - fallback: fallbackComponent, - getInitials, - getAvatarProps, - getImageProps, - } = useAvatar({ - ref, - ...props, - }); - - const fallback = useMemo(() => { - if (!showFallback && src) return null; - - const ariaLabel = alt || name || "avatar"; - - if (fallbackComponent) { - return ( -
    - {fallbackComponent} -
    - ); - } - - return name ? ( - - {getInitials(name)} - - ) : ( - - {icon} - - ); - }, [showFallback, src, fallbackComponent, name, classNames]); - - return ( -
    - {src && {alt}} - {fallback} -
    - ); -}); - -MyAvatar.displayName = "MyAvatar"; - -export default MyAvatar;`; - -const AppTs = `import {forwardRef, useMemo} from "react"; - -import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react"; - -export interface AvatarProps extends BaseAvatarProps {} - -const MyAvatar = forwardRef((props, ref) => { - const { - src, - icon = , - alt, - classNames, - slots, - name, - showFallback, - fallback: fallbackComponent, - getInitials, - getAvatarProps, - getImageProps, - } = useAvatar({ - ref, - ...props, - }); - - const fallback = useMemo(() => { - if (!showFallback && src) return null; - - const ariaLabel = alt || name || "avatar"; - - if (fallbackComponent) { - return ( -
    - {fallbackComponent} -
    - ); - } - - return name ? ( - - {getInitials(name)} - - ) : ( - - {icon} - - ); - }, [showFallback, src, fallbackComponent, name, classNames]); - - return ( -
    - {src && {alt}} - {fallback} -
    - ); -}); - -Avatar.displayName = "MyAvatar"; - -export default MyAvatar;`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/custom.raw.jsx b/apps/docs/content/components/avatar/custom.raw.jsx new file mode 100644 index 000000000..fb19aa1dc --- /dev/null +++ b/apps/docs/content/components/avatar/custom.raw.jsx @@ -0,0 +1,15 @@ +import {Avatar, AvatarIcon} from "@nextui-org/react"; + +export default function App() { + return ( +
    + } + /> +
    + ); +} diff --git a/apps/docs/content/components/avatar/custom.ts b/apps/docs/content/components/avatar/custom.ts index 022b950d9..f6791778a 100644 --- a/apps/docs/content/components/avatar/custom.ts +++ b/apps/docs/content/components/avatar/custom.ts @@ -1,18 +1,4 @@ -const App = `import {Avatar, AvatarIcon} from "@nextui-org/react"; - -export default function App() { - return ( -
    - } - classNames={{ - base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]", - icon: "text-black/80", - }} - /> -
    - ); -}`; +import App from "./custom.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/disabled.raw.jsx b/apps/docs/content/components/avatar/disabled.raw.jsx new file mode 100644 index 000000000..99061379d --- /dev/null +++ b/apps/docs/content/components/avatar/disabled.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/disabled.ts b/apps/docs/content/components/avatar/disabled.ts index 7449d4017..1a215cc91 100644 --- a/apps/docs/content/components/avatar/disabled.ts +++ b/apps/docs/content/components/avatar/disabled.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/fallbacks.raw.jsx b/apps/docs/content/components/avatar/fallbacks.raw.jsx new file mode 100644 index 000000000..dbde19d7f --- /dev/null +++ b/apps/docs/content/components/avatar/fallbacks.raw.jsx @@ -0,0 +1,11 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/fallbacks.ts b/apps/docs/content/components/avatar/fallbacks.ts index 6af995a0a..4abe22969 100644 --- a/apps/docs/content/components/avatar/fallbacks.ts +++ b/apps/docs/content/components/avatar/fallbacks.ts @@ -1,14 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./fallbacks.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-custom-count.raw.jsx b/apps/docs/content/components/avatar/group-custom-count.raw.jsx new file mode 100644 index 000000000..a436fc951 --- /dev/null +++ b/apps/docs/content/components/avatar/group-custom-count.raw.jsx @@ -0,0 +1,21 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + ( +

    +{count} others

    + )} + total={10} + > + + + + + + +     + ); +} diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts index a9ffab8b1..814b7842a 100644 --- a/apps/docs/content/components/avatar/group-custom-count.ts +++ b/apps/docs/content/components/avatar/group-custom-count.ts @@ -1,24 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - ( -

    +{count} others

    - )} - > - - - - - - -     - ); -}`; +import App from "./group-custom-count.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.jsx b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx new file mode 100644 index 000000000..59945aafb --- /dev/null +++ b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx @@ -0,0 +1,29 @@ +import {forwardRef} from "react"; +import {Avatar, useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react"; + +const AvatarGroup = forwardRef((props, ref) => { + const { + Component, + clones, + context, + remainingCount, + renderCount = (count) => , + getAvatarGroupProps, + } = useAvatarGroup({ + ref, + ...props, + }); + + return ( + + + {clones} + {remainingCount > 0 && renderCount(remainingCount)} + + + ); +}); + +AvatarGroup.displayName = "AvatarGroup"; + +export default AvatarGroup; diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.tsx b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx new file mode 100644 index 000000000..8535a023f --- /dev/null +++ b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx @@ -0,0 +1,36 @@ +import {forwardRef} from "react"; +import { + Avatar, + useAvatarGroup, + AvatarGroupProvider, + AvatarGroupProps as BaseAvatarGroupProps, +} from "@nextui-org/react"; + +export interface AvatarGroupProps extends BaseAvatarGroupProps {} + +const AvatarGroup = forwardRef((props, ref) => { + const { + Component, + clones, + context, + remainingCount, + renderCount = (count) => , + getAvatarGroupProps, + } = useAvatarGroup({ + ref, + ...props, + }); + + return ( + + + {clones} + {remainingCount > 0 && renderCount(remainingCount)} + + + ); +}); + +AvatarGroup.displayName = "AvatarGroup"; + +export default AvatarGroup; diff --git a/apps/docs/content/components/avatar/group-custom-impl.ts b/apps/docs/content/components/avatar/group-custom-impl.ts index dbacff25d..16dbee71c 100644 --- a/apps/docs/content/components/avatar/group-custom-impl.ts +++ b/apps/docs/content/components/avatar/group-custom-impl.ts @@ -1,68 +1,5 @@ -const App = `import {forwardRef} from "react"; - -import {useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react"; -import Avatar from "./avatar"; // your custom avatar or nextui avatar - -const AvatarGroup = forwardRef((props, ref) => { - const { - Component, - clones, - context, - remainingCount, - renderCount = (count) => , - getAvatarGroupProps, - } = useAvatarGroup({ - ref, - ...props, - }); - - return ( - - - {clones} - {remainingCount > 0 && renderCount(remainingCount)} - - - ); -}); - -AvatarGroup.displayName = "AvatarGroup"; - -export default AvatarGroup;`; - -const AppTs = `import {forwardRef} from "react"; - -import {useAvatarGroup, AvatarGroupProvider, AvatarGroupProps as BaseAvatarGroupProps} from "@nextui-org/react"; -import Avatar from "./avatar"; // your custom avatar or nextui avatar - -export interface AvatarGroupProps extends BaseAvatarGroupProps {} - -const AvatarGroup = forwardRef((props, ref) => { - const { - Component, - clones, - context, - remainingCount, - renderCount = (count) => , - getAvatarGroupProps, - } = useAvatarGroup({ - ref, - ...props, - }); - - return ( - - - {clones} - {remainingCount > 0 && renderCount(remainingCount)} - - - ); -}); - -AvatarGroup.displayName = "AvatarGroup"; - -export default AvatarGroup;`; +import App from "./group-custom-impl.raw.jsx?raw"; +import AppTs from "./group-custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-disabled.raw.jsx b/apps/docs/content/components/avatar/group-disabled.raw.jsx new file mode 100644 index 000000000..da8721dc3 --- /dev/null +++ b/apps/docs/content/components/avatar/group-disabled.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-disabled.ts b/apps/docs/content/components/avatar/group-disabled.ts index ba703b89d..a0fb219d2 100644 --- a/apps/docs/content/components/avatar/group-disabled.ts +++ b/apps/docs/content/components/avatar/group-disabled.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group-disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-grid.raw.jsx b/apps/docs/content/components/avatar/group-grid.raw.jsx new file mode 100644 index 000000000..eebe242a1 --- /dev/null +++ b/apps/docs/content/components/avatar/group-grid.raw.jsx @@ -0,0 +1,17 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-grid.ts b/apps/docs/content/components/avatar/group-grid.ts index abd2a7443..1c768c94c 100644 --- a/apps/docs/content/components/avatar/group-grid.ts +++ b/apps/docs/content/components/avatar/group-grid.ts @@ -1,20 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - - - - ); -}`; +import App from "./group-grid.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-max.raw.jsx b/apps/docs/content/components/avatar/group-max.raw.jsx new file mode 100644 index 000000000..b1109cff3 --- /dev/null +++ b/apps/docs/content/components/avatar/group-max.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-max.ts b/apps/docs/content/components/avatar/group-max.ts index 5bc76a002..c2515e86c 100644 --- a/apps/docs/content/components/avatar/group-max.ts +++ b/apps/docs/content/components/avatar/group-max.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group-max.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-total.raw.jsx b/apps/docs/content/components/avatar/group-total.raw.jsx new file mode 100644 index 000000000..d1ce69661 --- /dev/null +++ b/apps/docs/content/components/avatar/group-total.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-total.ts b/apps/docs/content/components/avatar/group-total.ts index 463073b93..3545b036f 100644 --- a/apps/docs/content/components/avatar/group-total.ts +++ b/apps/docs/content/components/avatar/group-total.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group-total.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group.raw.jsx b/apps/docs/content/components/avatar/group.raw.jsx new file mode 100644 index 000000000..827de4ca2 --- /dev/null +++ b/apps/docs/content/components/avatar/group.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group.ts b/apps/docs/content/components/avatar/group.ts index b22b13adc..0660a894c 100644 --- a/apps/docs/content/components/avatar/group.ts +++ b/apps/docs/content/components/avatar/group.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/radius.raw.jsx b/apps/docs/content/components/avatar/radius.raw.jsx new file mode 100644 index 000000000..94da5df6b --- /dev/null +++ b/apps/docs/content/components/avatar/radius.raw.jsx @@ -0,0 +1,12 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/radius.ts b/apps/docs/content/components/avatar/radius.ts index 066a399d5..7b78db1ce 100644 --- a/apps/docs/content/components/avatar/radius.ts +++ b/apps/docs/content/components/avatar/radius.ts @@ -1,15 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/sizes.raw.jsx b/apps/docs/content/components/avatar/sizes.raw.jsx new file mode 100644 index 000000000..6e3f73560 --- /dev/null +++ b/apps/docs/content/components/avatar/sizes.raw.jsx @@ -0,0 +1,16 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/sizes.ts b/apps/docs/content/components/avatar/sizes.ts index 993396e52..85a2f5b30 100644 --- a/apps/docs/content/components/avatar/sizes.ts +++ b/apps/docs/content/components/avatar/sizes.ts @@ -1,16 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/usage.raw.jsx b/apps/docs/content/components/avatar/usage.raw.jsx new file mode 100644 index 000000000..37b9b49dc --- /dev/null +++ b/apps/docs/content/components/avatar/usage.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/avatar/usage.ts b/apps/docs/content/components/avatar/usage.ts index f55f584c8..1118304c3 100644 --- a/apps/docs/content/components/avatar/usage.ts +++ b/apps/docs/content/components/avatar/usage.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/a11y.raw.jsx b/apps/docs/content/components/badge/a11y.raw.jsx new file mode 100644 index 000000000..6e8fe1715 --- /dev/null +++ b/apps/docs/content/components/badge/a11y.raw.jsx @@ -0,0 +1,31 @@ +import {Badge, Button} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts index ede5ba5ed..e53640d68 100644 --- a/apps/docs/content/components/badge/a11y.ts +++ b/apps/docs/content/components/badge/a11y.ts @@ -1,44 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -const App = `import {Badge, Button} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./a11y.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, }; export default { diff --git a/apps/docs/content/components/badge/colors.raw.jsx b/apps/docs/content/components/badge/colors.raw.jsx new file mode 100644 index 000000000..b7358bee7 --- /dev/null +++ b/apps/docs/content/components/badge/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + + + + + + + + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/badge/colors.ts b/apps/docs/content/components/badge/colors.ts index 1a7974283..d5bef810a 100644 --- a/apps/docs/content/components/badge/colors.ts +++ b/apps/docs/content/components/badge/colors.ts @@ -1,47 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - - - - - - - - - - - - - -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/content-examples.raw.jsx b/apps/docs/content/components/badge/content-examples.raw.jsx new file mode 100644 index 000000000..0850c9000 --- /dev/null +++ b/apps/docs/content/components/badge/content-examples.raw.jsx @@ -0,0 +1,80 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CheckIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
    + + + + + + + + + + } placement="bottom-right"> + + + } + placement="top-right" + shape="circle" + > + + +
    + ); +} diff --git a/apps/docs/content/components/badge/content-examples.ts b/apps/docs/content/components/badge/content-examples.ts index e5a43ff2a..f21e28ce5 100644 --- a/apps/docs/content/components/badge/content-examples.ts +++ b/apps/docs/content/components/badge/content-examples.ts @@ -1,110 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -export const CheckIcon = `export const CheckIcon = ({ - size, - height, - width, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Badge, Avatar} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; -import {CheckIcon} from "./CheckIcon"; - -export default function App() { - return ( -
    - - - - - - - - - - } - color="success" - placement="bottom-right" - > - - - } - color="danger" - shape="circle" - placement="top-right" - > - - -
    - ); -}`; +import App from "./content-examples.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/badge/placements.raw.jsx b/apps/docs/content/components/badge/placements.raw.jsx new file mode 100644 index 000000000..749e64888 --- /dev/null +++ b/apps/docs/content/components/badge/placements.raw.jsx @@ -0,0 +1,20 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/badge/placements.ts b/apps/docs/content/components/badge/placements.ts index 6a4af7b82..dc67908b7 100644 --- a/apps/docs/content/components/badge/placements.ts +++ b/apps/docs/content/components/badge/placements.ts @@ -1,39 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - - - - - - - -
    - ); -}`; +import App from "./placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/shapes.raw.jsx b/apps/docs/content/components/badge/shapes.raw.jsx new file mode 100644 index 000000000..59777647f --- /dev/null +++ b/apps/docs/content/components/badge/shapes.raw.jsx @@ -0,0 +1,14 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/badge/shapes.ts b/apps/docs/content/components/badge/shapes.ts index 8f6370503..75524eae1 100644 --- a/apps/docs/content/components/badge/shapes.ts +++ b/apps/docs/content/components/badge/shapes.ts @@ -1,25 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./shapes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/show-outline.raw.jsx b/apps/docs/content/components/badge/show-outline.raw.jsx new file mode 100644 index 000000000..960ab3f52 --- /dev/null +++ b/apps/docs/content/components/badge/show-outline.raw.jsx @@ -0,0 +1,14 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/badge/show-outline.ts b/apps/docs/content/components/badge/show-outline.ts index d11a8860b..83f4e660d 100644 --- a/apps/docs/content/components/badge/show-outline.ts +++ b/apps/docs/content/components/badge/show-outline.ts @@ -1,25 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./show-outline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/sizes.raw.jsx b/apps/docs/content/components/badge/sizes.raw.jsx new file mode 100644 index 000000000..cdf37c606 --- /dev/null +++ b/apps/docs/content/components/badge/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts index c212de05e..85a2f5b30 100644 --- a/apps/docs/content/components/badge/sizes.ts +++ b/apps/docs/content/components/badge/sizes.ts @@ -1,29 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/usage.raw.jsx b/apps/docs/content/components/badge/usage.raw.jsx new file mode 100644 index 000000000..1599fc5a2 --- /dev/null +++ b/apps/docs/content/components/badge/usage.raw.jsx @@ -0,0 +1,9 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/badge/usage.ts b/apps/docs/content/components/badge/usage.ts index a4ca4998a..1118304c3 100644 --- a/apps/docs/content/components/badge/usage.ts +++ b/apps/docs/content/components/badge/usage.ts @@ -1,16 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/variants.raw.jsx b/apps/docs/content/components/badge/variants.raw.jsx new file mode 100644 index 000000000..ab7ef5a02 --- /dev/null +++ b/apps/docs/content/components/badge/variants.raw.jsx @@ -0,0 +1,20 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/badge/variants.ts b/apps/docs/content/components/badge/variants.ts index cc466b3b7..ddea95fb2 100644 --- a/apps/docs/content/components/badge/variants.ts +++ b/apps/docs/content/components/badge/variants.ts @@ -1,35 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - - - - - - - -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/visibility.raw.jsx b/apps/docs/content/components/badge/visibility.raw.jsx new file mode 100644 index 000000000..c22ce8b40 --- /dev/null +++ b/apps/docs/content/components/badge/visibility.raw.jsx @@ -0,0 +1,71 @@ +import {Badge, Switch} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CartIcon = ({size, height, width, ...props}) => { + return ( + + + + + + + ); +}; + +export default function App() { + const [isInvisible, setIsInvisible] = React.useState(false); + + return ( +
    +
    + + + + + + +
    + setIsInvisible(!value)}> + Show badge + +
    + ); +} diff --git a/apps/docs/content/components/badge/visibility.ts b/apps/docs/content/components/badge/visibility.ts index 3729cfaae..8cc2818a7 100644 --- a/apps/docs/content/components/badge/visibility.ts +++ b/apps/docs/content/components/badge/visibility.ts @@ -1,81 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -export const CartIcon = `export const CartIcon = ({ size, height, width, ...props }) => { - return ( - - - - - - - ); -};`; - -const App = `import {Badge, Avatar, Switch} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; -import {CartIcon} from "./CartIcon"; - -export default function App() { - const [isInvisible, setIsInvisible] = React.useState(false); - - return ( -
    -
    - - - - - - -
    - setIsInvisible(!value)}> - Show badge - -
    - ); -}`; +import App from "./visibility.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, - "/CartIcon.jsx": CartIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx b/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx new file mode 100644 index 000000000..e846b8195 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/collapsing-items.ts b/apps/docs/content/components/breadcrumbs/collapsing-items.ts index 0f953921c..47fadf484 100644 --- a/apps/docs/content/components/breadcrumbs/collapsing-items.ts +++ b/apps/docs/content/components/breadcrumbs/collapsing-items.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./collapsing-items.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/colors.raw.jsx b/apps/docs/content/components/breadcrumbs/colors.raw.jsx new file mode 100644 index 000000000..3ede2cb35 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/colors.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + + Home + Music + Artist + Album + Song + + ))} +
    + ); +} diff --git a/apps/docs/content/components/breadcrumbs/colors.ts b/apps/docs/content/components/breadcrumbs/colors.ts index f5abd4a4e..d5bef810a 100644 --- a/apps/docs/content/components/breadcrumbs/colors.ts +++ b/apps/docs/content/components/breadcrumbs/colors.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"]; - - return ( -
    - {colors.map((color) => ( - - Home - Music - Artist - Album - Song - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/controlled.raw.jsx b/apps/docs/content/components/breadcrumbs/controlled.raw.jsx new file mode 100644 index 000000000..151338a9b --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/controlled.raw.jsx @@ -0,0 +1,25 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("song"); + + return ( + setCurrentPage(key)}> + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/controlled.raw.tsx b/apps/docs/content/components/breadcrumbs/controlled.raw.tsx new file mode 100644 index 000000000..f7890a976 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/controlled.raw.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("song"); + + return ( + setCurrentPage(key)}> + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/controlled.ts b/apps/docs/content/components/breadcrumbs/controlled.ts index 45ed66b15..1f1a36336 100644 --- a/apps/docs/content/components/breadcrumbs/controlled.ts +++ b/apps/docs/content/components/breadcrumbs/controlled.ts @@ -1,54 +1,5 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("song"); - - return ( - setCurrentPage(key)}> - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; - -const AppTs = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("song"); - - return ( - setCurrentPage(key)}> - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx new file mode 100644 index 000000000..b6cd996ce --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx @@ -0,0 +1,70 @@ +import { + Breadcrumbs, + BreadcrumbItem, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, +} from "@nextui-org/react"; + +export const ChevronDownIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + Home + Music + Artist + Album + + + + + + + Song 1 + Song 2 + Song 3 + + + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/custom-items.ts b/apps/docs/content/components/breadcrumbs/custom-items.ts index 3e323265b..26a1e0f9a 100644 --- a/apps/docs/content/components/breadcrumbs/custom-items.ts +++ b/apps/docs/content/components/breadcrumbs/custom-items.ts @@ -1,74 +1,7 @@ -const ChevronDownIcon = `export const ChevronDownIcon = (props) => ( - -);`; - -const App = `import {Breadcrumbs, BreadcrumbItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; -import {ChevronDownIcon} from "./ChevronDownIcon"; - -export default function App() { - return ( - - Home - Music - Artist - Album - - - - - - - - Song 1 - - - Song 2 - - - Song 3 - - - - - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ChevronDownIcon.jsx": ChevronDownIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx new file mode 100644 index 000000000..ffd11a01b --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx @@ -0,0 +1,56 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export const ShoppingCartIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + + Checkout + Payment + Delivery Address + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.ts b/apps/docs/content/components/breadcrumbs/custom-styles.ts index 5dd7816a3..da3ea9093 100644 --- a/apps/docs/content/components/breadcrumbs/custom-styles.ts +++ b/apps/docs/content/components/breadcrumbs/custom-styles.ts @@ -1,62 +1,7 @@ -const ShoppingCartIcon = `export const ShoppingCartIcon = (props) => ( - -);`; - -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; -import {ShoppingCartIcon} from "./ShoppingCartIcon"; - -export default function App() { - return ( - - - - - Checkout - Payment - Delivery Address - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ShoppingCartIcon.jsx": ShoppingCartIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx new file mode 100644 index 000000000..66222ed46 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx @@ -0,0 +1,45 @@ +import { + Breadcrumbs, + BreadcrumbItem, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, +} from "@nextui-org/react"; + +export default function App() { + return ( + ( +
    + + + + + + {items.map((item, index) => ( + + {item.children} + + ))} + + + {separator} +
    + )} + > + Home + Music + Artist + Album + Featured + Song +     + ); +} diff --git a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts index e76ab23af..bb104d640 100644 --- a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts +++ b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts @@ -1,45 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - ( -
    - - - - - - {items.map((item, index) => ( - - {item.children} - - ))} - - - {separator} -
    - )} - > - Home - Music - Artist - Album - Featured - Song -     - ); -}`; +import App from "./customizing-ellipsis.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/disabled.raw.jsx b/apps/docs/content/components/breadcrumbs/disabled.raw.jsx new file mode 100644 index 000000000..5eb03e55f --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/disabled.ts b/apps/docs/content/components/breadcrumbs/disabled.ts index 4e750c6d4..1a215cc91 100644 --- a/apps/docs/content/components/breadcrumbs/disabled.ts +++ b/apps/docs/content/components/breadcrumbs/disabled.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx b/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx new file mode 100644 index 000000000..f34576245 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx @@ -0,0 +1,39 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("music"); + + return ( + setCurrentPage(key)} + > + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx b/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx new file mode 100644 index 000000000..15cecac70 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("music"); + + return ( + setCurrentPage(key)} + > + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/menu-type.ts b/apps/docs/content/components/breadcrumbs/menu-type.ts index 56ad50cc1..db610ba24 100644 --- a/apps/docs/content/components/breadcrumbs/menu-type.ts +++ b/apps/docs/content/components/breadcrumbs/menu-type.ts @@ -1,81 +1,5 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("music"); - - return ( - setCurrentPage(key)} - classNames={{ - list: "gap-2", - }} - itemClasses={{ - item: [ - "px-2 py-0.5 border-small border-default-400 rounded-small", - "data-[current=true]:border-foreground data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors", - "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100", - ], - separator: "hidden", - }} - > - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; - -const AppTs = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("music"); - - return ( - setCurrentPage(key)} - classNames={{ - list: "gap-2", - }} - itemClasses={{ - item: [ - "px-2 py-0.5 border-small border-default-400 rounded-small", - "data-[current=true]:border-default-800 data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors", - "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100", - ], - }} - > - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; +import App from "./menu-type.raw.jsx?raw"; +import AppTs from "./menu-type.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/radius.raw.jsx b/apps/docs/content/components/breadcrumbs/radius.raw.jsx new file mode 100644 index 000000000..042d5aed7 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/radius.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
    + {radius.map((r) => ( + + Home + Music + Artist + Album + Song + + ))} +
    + ); +} diff --git a/apps/docs/content/components/breadcrumbs/radius.ts b/apps/docs/content/components/breadcrumbs/radius.ts index fb6968d60..7b78db1ce 100644 --- a/apps/docs/content/components/breadcrumbs/radius.ts +++ b/apps/docs/content/components/breadcrumbs/radius.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const radius = [ "full", "lg", "md", "sm", "none"]; - - return ( -
    - {radius.map((r) => ( - - Home - Music - Artist - Album - Song - - ))} -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/routing.raw.jsx b/apps/docs/content/components/breadcrumbs/routing.raw.jsx new file mode 100644 index 000000000..2da60a4b4 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/routing.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Button + Breadcrumbs + Card + Checkbox + Code + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/routing.ts b/apps/docs/content/components/breadcrumbs/routing.ts index 62b48c905..df25d14fe 100644 --- a/apps/docs/content/components/breadcrumbs/routing.ts +++ b/apps/docs/content/components/breadcrumbs/routing.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Button - Breadcrumbs - Card - Checkbox - Code - - ); -}`; +import App from "./routing.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/separator.raw.jsx b/apps/docs/content/components/breadcrumbs/separator.raw.jsx new file mode 100644 index 000000000..70a96554d --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/separator.raw.jsx @@ -0,0 +1,18 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/separator.ts b/apps/docs/content/components/breadcrumbs/separator.ts index 15cc27376..db1381594 100644 --- a/apps/docs/content/components/breadcrumbs/separator.ts +++ b/apps/docs/content/components/breadcrumbs/separator.ts @@ -1,21 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./separator.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/sizes.raw.jsx b/apps/docs/content/components/breadcrumbs/sizes.raw.jsx new file mode 100644 index 000000000..c7b794da7 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/sizes.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( + + Home + Music + Artist + Album + Song + + ))} +
    + ); +} diff --git a/apps/docs/content/components/breadcrumbs/sizes.ts b/apps/docs/content/components/breadcrumbs/sizes.ts index f90e7ca35..85a2f5b30 100644 --- a/apps/docs/content/components/breadcrumbs/sizes.ts +++ b/apps/docs/content/components/breadcrumbs/sizes.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const sizes = ["sm", "md", "lg"]; - - return ( -
    - {sizes.map((size) => ( - - Home - Music - Artist - Album - Song - - ))} -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx new file mode 100644 index 000000000..30cee189d --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx @@ -0,0 +1,137 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export const HomeIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const ArtistIcon = (props) => { + return ( + + ); +}; + +export const AlbumIcon = (props) => { + return ( + + ); +}; + +export const SongIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + }>Home + }>Music + }>Artist + }>Album + }>Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/start-end-content.ts b/apps/docs/content/components/breadcrumbs/start-end-content.ts index 144fb3a53..e99c7e599 100644 --- a/apps/docs/content/components/breadcrumbs/start-end-content.ts +++ b/apps/docs/content/components/breadcrumbs/start-end-content.ts @@ -1,110 +1,7 @@ -const HomeIcon = `export const HomeIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const ArtistIcon = `export const ArtistIcon = (props) => ( - -);`; - -const AlbumIcon = `export const AlbumIcon = (props) => ( - -);`; - -const SongIcon = `export const SongIcon = (props) => ( - -);`; - -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; -import {HomeIcon} from "./HomeIcon"; -import {MusicIcon} from "./MusicIcon"; -import {ArtistIcon} from "./ArtistIcon"; -import {AlbumIcon} from "./AlbumIcon"; -import {SongIcon} from "./SongIcon"; - -export default function App() { - return ( - - }>Home - }>Music - }>Artist - }>Album - }>Song - - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HomeIcon.jsx": HomeIcon, - "/MusicIcon.jsx": MusicIcon, - "/ArtistIcon.jsx": ArtistIcon, - "/AlbumIcon.jsx": AlbumIcon, - "/SongIcon.jsx": SongIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/underlines.raw.jsx b/apps/docs/content/components/breadcrumbs/underlines.raw.jsx new file mode 100644 index 000000000..479afcecf --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/underlines.raw.jsx @@ -0,0 +1,31 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const underlines = ["none", "hover", "always", "active", "focus"]; + const descriptions = { + none: "No underline", + hover: "Underline on hover", + always: "Always underline", + active: "Underline on active", + focus: "Underline on focus", + }; + + return ( +
    + {underlines.map((u) => ( +
    +

    + {descriptions[u]} ({u}) +

    + + Home + Music + Artist + Album + Song + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/breadcrumbs/underlines.ts b/apps/docs/content/components/breadcrumbs/underlines.ts index 990ea97b1..962a9b736 100644 --- a/apps/docs/content/components/breadcrumbs/underlines.ts +++ b/apps/docs/content/components/breadcrumbs/underlines.ts @@ -1,34 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const underlines = ["none", "hover", "always", "active", "focus"]; - const descriptions = { - none: "No underline", - hover: "Underline on hover", - always: "Always underline", - active: "Underline on active", - focus: "Underline on focus", - } - - return ( -
    - {underlines.map((u) => ( -
    -

    - {descriptions[u]} ({u}) -

    - - Home - Music - Artist - Album - Song - -
    - ))} -
    - ); -}`; +import App from "./underlines.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/usage.raw.jsx b/apps/docs/content/components/breadcrumbs/usage.raw.jsx new file mode 100644 index 000000000..53cddf3bf --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/usage.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/usage.ts b/apps/docs/content/components/breadcrumbs/usage.ts index df213fce9..1118304c3 100644 --- a/apps/docs/content/components/breadcrumbs/usage.ts +++ b/apps/docs/content/components/breadcrumbs/usage.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/variants.raw.jsx b/apps/docs/content/components/breadcrumbs/variants.raw.jsx new file mode 100644 index 000000000..f51df2930 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/variants.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const variants = ["solid", "bordered", "light"]; + + return ( +
    + {variants.map((variant) => ( + + Home + Music + Artist + Album + Song + + ))} +
    + ); +} diff --git a/apps/docs/content/components/breadcrumbs/variants.ts b/apps/docs/content/components/breadcrumbs/variants.ts index 45406cb58..ddea95fb2 100644 --- a/apps/docs/content/components/breadcrumbs/variants.ts +++ b/apps/docs/content/components/breadcrumbs/variants.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const variants = ["solid", "bordered", "light"]; - - return ( -
    - {variants.map((variant) => ( - - Home - Music - Artist - Album - Song - - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/colors.raw.jsx b/apps/docs/content/components/button/colors.raw.jsx new file mode 100644 index 000000000..07f8cb6aa --- /dev/null +++ b/apps/docs/content/components/button/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/button/colors.ts b/apps/docs/content/components/button/colors.ts index b0bf1c152..d5bef810a 100644 --- a/apps/docs/content/components/button/colors.ts +++ b/apps/docs/content/components/button/colors.ts @@ -1,29 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/custom-impl.raw.jsx b/apps/docs/content/components/button/custom-impl.raw.jsx new file mode 100644 index 000000000..f1ec13ac2 --- /dev/null +++ b/apps/docs/content/components/button/custom-impl.raw.jsx @@ -0,0 +1,38 @@ +import {forwardRef} from "react"; +import {useButton, Ripple, Spinner} from "@nextui-org/react"; + +const MyButton = forwardRef((props, ref) => { + const { + domRef, + children, + spinnerSize, + spinner = , + spinnerPlacement, + startContent, + endContent, + isLoading, + disableRipple, + getButtonProps, + getRippleProps, + } = useButton({ + ref, + ...props, + }); + + const {ripples, onClear} = getRippleProps(); + + return ( + + ); +}); + +MyButton.displayName = "MyButton"; + +export default MyButton; diff --git a/apps/docs/content/components/button/custom-impl.raw.tsx b/apps/docs/content/components/button/custom-impl.raw.tsx new file mode 100644 index 000000000..e297b601f --- /dev/null +++ b/apps/docs/content/components/button/custom-impl.raw.tsx @@ -0,0 +1,40 @@ +import {forwardRef} from "react"; +import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react"; + +export interface ButtonProps extends BaseButtonProps {} + +const MyButton = forwardRef((props, ref) => { + const { + domRef, + children, + spinnerSize, + spinner = , + spinnerPlacement, + startContent, + endContent, + isLoading, + disableRipple, + getButtonProps, + getRippleProps, + } = useButton({ + ref, + ...props, + }); + + const {ripples, onClear} = getRippleProps(); + + return ( + + ); +}); + +MyButton.displayName = "MyButton"; + +export default MyButton; diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts index a7ad847c5..ef0d8ef53 100644 --- a/apps/docs/content/components/button/custom-impl.ts +++ b/apps/docs/content/components/button/custom-impl.ts @@ -1,83 +1,5 @@ -const App = `import {forwardRef} from "react"; -import {useButton, Ripple, Spinner} from "@nextui-org/react"; - - -const MyButton = forwardRef((props, ref) => { - const { - domRef, - children, - spinnerSize, - spinner = , - spinnerPlacement, - startContent, - endContent, - isLoading, - disableRipple, - getButtonProps, - getRippleProps, - } = useButton({ - ref, - ...props, - }); - - const {ripples, onClear} = getRippleProps(); - - return ( - - ); -}); - -MyButton.displayName = "MyButton"; - -export default MyButton;`; - -const AppTs = `import {forwardRef} from "react"; -import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react"; - -export interface ButtonProps extends BaseButtonProps {} - -const MyButton = forwardRef((props, ref) => { - const { - domRef, - children, - spinnerSize, - spinner = , - spinnerPlacement, - startContent, - endContent, - isLoading, - disableRipple, - getButtonProps, - getRippleProps, - } = useButton({ - ref, - ...props, - }); - - const {ripples, onClear} = getRippleProps(); - - return ( - - ); -}); - -MyButton.displayName = "MyButton"; - -export default MyButton;`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/custom-styles.raw.jsx b/apps/docs/content/components/button/custom-styles.raw.jsx new file mode 100644 index 000000000..cd999fa23 --- /dev/null +++ b/apps/docs/content/components/button/custom-styles.raw.jsx @@ -0,0 +1,12 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/custom-styles.ts b/apps/docs/content/components/button/custom-styles.ts index b2136ec09..da3ea9093 100644 --- a/apps/docs/content/components/button/custom-styles.ts +++ b/apps/docs/content/components/button/custom-styles.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/disabled.raw.jsx b/apps/docs/content/components/button/disabled.raw.jsx new file mode 100644 index 000000000..9d59145f8 --- /dev/null +++ b/apps/docs/content/components/button/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/disabled.ts b/apps/docs/content/components/button/disabled.ts index 57dbe8b25..1a215cc91 100644 --- a/apps/docs/content/components/button/disabled.ts +++ b/apps/docs/content/components/button/disabled.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/group-disabled.raw.jsx b/apps/docs/content/components/button/group-disabled.raw.jsx new file mode 100644 index 000000000..f42ab62df --- /dev/null +++ b/apps/docs/content/components/button/group-disabled.raw.jsx @@ -0,0 +1,11 @@ +import {Button, ButtonGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + ); +} diff --git a/apps/docs/content/components/button/group-disabled.ts b/apps/docs/content/components/button/group-disabled.ts index 55b5281bc..a0fb219d2 100644 --- a/apps/docs/content/components/button/group-disabled.ts +++ b/apps/docs/content/components/button/group-disabled.ts @@ -1,14 +1,4 @@ -const App = `import {Button, ButtonGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - ); -}`; +import App from "./group-disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/group-use-case.raw.jsx b/apps/docs/content/components/button/group-use-case.raw.jsx new file mode 100644 index 000000000..5685c46f6 --- /dev/null +++ b/apps/docs/content/components/button/group-use-case.raw.jsx @@ -0,0 +1,71 @@ +import { + Button, + ButtonGroup, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, +} from "@nextui-org/react"; + +export const ChevronDownIcon = () => { + return ( + + + + ); +}; + +export default function App() { + const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"])); + + const descriptionsMap = { + merge: + "All commits from the source branch are added to the destination branch via a merge commit.", + squash: + "All commits from the source branch are added to the destination branch as a single commit.", + rebase: "All commits from the source branch are added to the destination branch individually.", + }; + + const labelsMap = { + merge: "Create a merge commit", + squash: "Squash and merge", + rebase: "Rebase and merge", + }; + + // Convert the Set to an Array and get the first value. + const selectedOptionValue = Array.from(selectedOption)[0]; + + return ( + + + + + + + + + {labelsMap["merge"]} + + + {labelsMap["squash"]} + + + {labelsMap["rebase"]} + + + + + ); +} diff --git a/apps/docs/content/components/button/group-use-case.ts b/apps/docs/content/components/button/group-use-case.ts index d1220f537..d563f8797 100644 --- a/apps/docs/content/components/button/group-use-case.ts +++ b/apps/docs/content/components/button/group-use-case.ts @@ -1,67 +1,7 @@ -const ChevronDownIcon = `export const ChevronDownIcon = () => ( - - - -);`; - -const App = `import {Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react"; -import {ChevronDownIcon} from './ChevronDownIcon'; - -export default function App() { - const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"])); - - const descriptionsMap = { - merge: - "All commits from the source branch are added to the destination branch via a merge commit.", - squash: - "All commits from the source branch are added to the destination branch as a single commit.", - rebase: "All commits from the source branch are added to the destination branch individually.", - }; - - const labelsMap = { - merge: "Create a merge commit", - squash: "Squash and merge", - rebase: "Rebase and merge", - } - - // Convert the Set to an Array and get the first value. - const selectedOptionValue = Array.from(selectedOption)[0]; - - return ( - - - - - - - - - {labelsMap["merge"]} - - - {labelsMap["squash"]} - - - {labelsMap["rebase"]} - - - - - ); -}`; +import App from "./group-use-case.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ChevronDownIcon.jsx": ChevronDownIcon, }; export default { diff --git a/apps/docs/content/components/button/group.raw.jsx b/apps/docs/content/components/button/group.raw.jsx new file mode 100644 index 000000000..4c3273f82 --- /dev/null +++ b/apps/docs/content/components/button/group.raw.jsx @@ -0,0 +1,11 @@ +import {Button, ButtonGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + ); +} diff --git a/apps/docs/content/components/button/group.ts b/apps/docs/content/components/button/group.ts index ec5d6678d..0660a894c 100644 --- a/apps/docs/content/components/button/group.ts +++ b/apps/docs/content/components/button/group.ts @@ -1,14 +1,4 @@ -const App = `import {Button, ButtonGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - ); -}`; +import App from "./group.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/icon-only.raw.jsx b/apps/docs/content/components/button/icon-only.raw.jsx new file mode 100644 index 000000000..ccb38b142 --- /dev/null +++ b/apps/docs/content/components/button/icon-only.raw.jsx @@ -0,0 +1,55 @@ +import {Button} from "@nextui-org/react"; + +export const HeartIcon = ({fill = "currentColor", filled, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CameraIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/button/icon-only.ts b/apps/docs/content/components/button/icon-only.ts index b438e283f..7709cd3f6 100644 --- a/apps/docs/content/components/button/icon-only.ts +++ b/apps/docs/content/components/button/icon-only.ts @@ -1,82 +1,7 @@ -const HeartIcon = `export const HeartIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - ); -}; -`; - -const CameraIcon = `export const CameraIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Button} from "@nextui-org/react"; -import {HeartIcon} from './HeartIcon'; -import {CameraIcon} from './CameraIcon'; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./icon-only.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HeartIcon.jsx": HeartIcon, - "/CameraIcon.jsx": CameraIcon, }; export default { diff --git a/apps/docs/content/components/button/icons.raw.jsx b/apps/docs/content/components/button/icons.raw.jsx new file mode 100644 index 000000000..2e1634bba --- /dev/null +++ b/apps/docs/content/components/button/icons.raw.jsx @@ -0,0 +1,62 @@ +import {Button} from "@nextui-org/react"; + +export const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + + + ); +}; + +export const CameraIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/button/icons.ts b/apps/docs/content/components/button/icons.ts index 783ae43bd..22a410c88 100644 --- a/apps/docs/content/components/button/icons.ts +++ b/apps/docs/content/components/button/icons.ts @@ -1,91 +1,7 @@ -const UserIcon = `export const UserIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - - - - ); -};`; - -const CameraIcon = `export const CameraIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Button} from "@nextui-org/react"; -import {UserIcon} from './UserIcon'; -import {CameraIcon} from './CameraIcon'; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/UserIcon.jsx": UserIcon, - "/CameraIcon.jsx": CameraIcon, }; export default { diff --git a/apps/docs/content/components/button/loading-custom.raw.jsx b/apps/docs/content/components/button/loading-custom.raw.jsx new file mode 100644 index 000000000..50979e32b --- /dev/null +++ b/apps/docs/content/components/button/loading-custom.raw.jsx @@ -0,0 +1,34 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/loading-custom.ts b/apps/docs/content/components/button/loading-custom.ts index 7dbe0d78f..b0036de8d 100644 --- a/apps/docs/content/components/button/loading-custom.ts +++ b/apps/docs/content/components/button/loading-custom.ts @@ -1,37 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./loading-custom.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/loading.raw.jsx b/apps/docs/content/components/button/loading.raw.jsx new file mode 100644 index 000000000..6b75c489d --- /dev/null +++ b/apps/docs/content/components/button/loading.raw.jsx @@ -0,0 +1,9 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/loading.ts b/apps/docs/content/components/button/loading.ts index 830d52eea..0c8fea5a5 100644 --- a/apps/docs/content/components/button/loading.ts +++ b/apps/docs/content/components/button/loading.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./loading.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/radius.raw.jsx b/apps/docs/content/components/button/radius.raw.jsx new file mode 100644 index 000000000..c91268e56 --- /dev/null +++ b/apps/docs/content/components/button/radius.raw.jsx @@ -0,0 +1,13 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + +
    + ); +} diff --git a/apps/docs/content/components/button/radius.ts b/apps/docs/content/components/button/radius.ts index 739ca0f5b..7b78db1ce 100644 --- a/apps/docs/content/components/button/radius.ts +++ b/apps/docs/content/components/button/radius.ts @@ -1,26 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/sizes.raw.jsx b/apps/docs/content/components/button/sizes.raw.jsx new file mode 100644 index 000000000..4880e203f --- /dev/null +++ b/apps/docs/content/components/button/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/button/sizes.ts b/apps/docs/content/components/button/sizes.ts index 06b90c1ff..85a2f5b30 100644 --- a/apps/docs/content/components/button/sizes.ts +++ b/apps/docs/content/components/button/sizes.ts @@ -1,20 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/usage.raw.jsx b/apps/docs/content/components/button/usage.raw.jsx new file mode 100644 index 000000000..fcb138b91 --- /dev/null +++ b/apps/docs/content/components/button/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/button/usage.ts b/apps/docs/content/components/button/usage.ts index f80f3914c..1118304c3 100644 --- a/apps/docs/content/components/button/usage.ts +++ b/apps/docs/content/components/button/usage.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/variants.raw.jsx b/apps/docs/content/components/button/variants.raw.jsx new file mode 100644 index 000000000..7a7eaff52 --- /dev/null +++ b/apps/docs/content/components/button/variants.raw.jsx @@ -0,0 +1,29 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/button/variants.ts b/apps/docs/content/components/button/variants.ts index fe6067aed..ddea95fb2 100644 --- a/apps/docs/content/components/button/variants.ts +++ b/apps/docs/content/components/button/variants.ts @@ -1,32 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - - -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx new file mode 100644 index 000000000..edce75b87 --- /dev/null +++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx @@ -0,0 +1,16 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [focusedDate, setFocusedDate] = React.useState(defaultDate); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx new file mode 100644 index 000000000..00f2666b8 --- /dev/null +++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx @@ -0,0 +1,19 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [focusedDate, setFocusedDate] = React.useState(defaultDate); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/controlled-focused-value.ts b/apps/docs/content/components/calendar/controlled-focused-value.ts index a405da506..100bf01c4 100644 --- a/apps/docs/content/components/calendar/controlled-focused-value.ts +++ b/apps/docs/content/components/calendar/controlled-focused-value.ts @@ -1,43 +1,15 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [focusedDate, setFocusedDate] = React.useState(defaultDate); - - return ( - - ); -}`; - -const AppTs = `import {Calendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [focusedDate, setFocusedDate] = React.useState(defaultDate); - - return ( - - ); -}`; +import App from "./controlled-focused-value.raw.jsx?raw"; +import AppTs from "./controlled-focused-value.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/controlled.raw.jsx b/apps/docs/content/components/calendar/controlled.raw.jsx new file mode 100644 index 000000000..54d418f9f --- /dev/null +++ b/apps/docs/content/components/calendar/controlled.raw.jsx @@ -0,0 +1,8 @@ +import {Calendar} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState(parseDate("2024-03-07")); + + return ; +} diff --git a/apps/docs/content/components/calendar/controlled.raw.tsx b/apps/docs/content/components/calendar/controlled.raw.tsx new file mode 100644 index 000000000..80c8b2dd2 --- /dev/null +++ b/apps/docs/content/components/calendar/controlled.raw.tsx @@ -0,0 +1,11 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState(parseDate("2024-03-07")); + + return ; +} diff --git a/apps/docs/content/components/calendar/controlled.ts b/apps/docs/content/components/calendar/controlled.ts index 4a1166231..1f1a36336 100644 --- a/apps/docs/content/components/calendar/controlled.ts +++ b/apps/docs/content/components/calendar/controlled.ts @@ -1,39 +1,15 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState(parseDate("2024-03-07")); - - return ( - - ); -}`; - -const AppTs = `import {Calendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState(parseDate("2024-03-07")); - - return ( - - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/disabled.raw.jsx b/apps/docs/content/components/calendar/disabled.raw.jsx new file mode 100644 index 000000000..1d08bd649 --- /dev/null +++ b/apps/docs/content/components/calendar/disabled.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/disabled.ts b/apps/docs/content/components/calendar/disabled.ts index d82f74206..1a215cc91 100644 --- a/apps/docs/content/components/calendar/disabled.ts +++ b/apps/docs/content/components/calendar/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/international-calendars.raw.jsx b/apps/docs/content/components/calendar/international-calendars.raw.jsx new file mode 100644 index 000000000..22d4a824a --- /dev/null +++ b/apps/docs/content/components/calendar/international-calendars.raw.jsx @@ -0,0 +1,10 @@ +import {Calendar} from "@nextui-org/react"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/calendar/international-calendars.ts b/apps/docs/content/components/calendar/international-calendars.ts index bda32d3a4..98bb8449e 100644 --- a/apps/docs/content/components/calendar/international-calendars.ts +++ b/apps/docs/content/components/calendar/international-calendars.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./international-calendars.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/invalid-date.raw.jsx b/apps/docs/content/components/calendar/invalid-date.raw.jsx new file mode 100644 index 000000000..372034725 --- /dev/null +++ b/apps/docs/content/components/calendar/invalid-date.raw.jsx @@ -0,0 +1,19 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(today(getLocalTimeZone())); + let {locale} = useLocale(); + let isInvalid = isWeekend(date, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/invalid-date.raw.tsx b/apps/docs/content/components/calendar/invalid-date.raw.tsx new file mode 100644 index 000000000..d9276c52e --- /dev/null +++ b/apps/docs/content/components/calendar/invalid-date.raw.tsx @@ -0,0 +1,22 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(today(getLocalTimeZone())); + let {locale} = useLocale(); + let isInvalid = isWeekend(date, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/invalid-date.ts b/apps/docs/content/components/calendar/invalid-date.ts index 6a8354c74..e373a04e5 100644 --- a/apps/docs/content/components/calendar/invalid-date.ts +++ b/apps/docs/content/components/calendar/invalid-date.ts @@ -1,51 +1,15 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState(today(getLocalTimeZone())); - let {locale} = useLocale(); - let isInvalid = isWeekend(date, locale); - - return ( - - ); -}`; - -const AppTs = `import {Calendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState(today(getLocalTimeZone())); - let {locale} = useLocale(); - let isInvalid = isWeekend(date, locale); - - return ( - - ); -}`; +import App from "./invalid-date.raw.jsx?raw"; +import AppTs from "./invalid-date.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/max-date-value.raw.jsx b/apps/docs/content/components/calendar/max-date-value.raw.jsx new file mode 100644 index 000000000..3edacc190 --- /dev/null +++ b/apps/docs/content/components/calendar/max-date-value.raw.jsx @@ -0,0 +1,12 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/max-date-value.ts b/apps/docs/content/components/calendar/max-date-value.ts index 9c60a5e91..6a8291336 100644 --- a/apps/docs/content/components/calendar/max-date-value.ts +++ b/apps/docs/content/components/calendar/max-date-value.ts @@ -1,15 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./max-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/min-date-value.raw.jsx b/apps/docs/content/components/calendar/min-date-value.raw.jsx new file mode 100644 index 000000000..c7d7ab70b --- /dev/null +++ b/apps/docs/content/components/calendar/min-date-value.raw.jsx @@ -0,0 +1,12 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/min-date-value.ts b/apps/docs/content/components/calendar/min-date-value.ts index 9ddbabbdb..4e86e8261 100644 --- a/apps/docs/content/components/calendar/min-date-value.ts +++ b/apps/docs/content/components/calendar/min-date-value.ts @@ -1,15 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./min-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/page-behaviour.raw.jsx b/apps/docs/content/components/calendar/page-behaviour.raw.jsx new file mode 100644 index 000000000..e28c53f65 --- /dev/null +++ b/apps/docs/content/components/calendar/page-behaviour.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/page-behaviour.ts b/apps/docs/content/components/calendar/page-behaviour.ts index cd4fd33d2..ef31c845d 100644 --- a/apps/docs/content/components/calendar/page-behaviour.ts +++ b/apps/docs/content/components/calendar/page-behaviour.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./page-behaviour.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/presets.raw.jsx b/apps/docs/content/components/calendar/presets.raw.jsx new file mode 100644 index 000000000..bf703ff29 --- /dev/null +++ b/apps/docs/content/components/calendar/presets.raw.jsx @@ -0,0 +1,87 @@ +import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [value, setValue] = React.useState(defaultDate); + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + classNames={{ + content: "w-full", + }} + focusedValue={value} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setValue} + /> +
    + ); +} diff --git a/apps/docs/content/components/calendar/presets.raw.tsx b/apps/docs/content/components/calendar/presets.raw.tsx new file mode 100644 index 000000000..496f8e37b --- /dev/null +++ b/apps/docs/content/components/calendar/presets.raw.tsx @@ -0,0 +1,90 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [value, setValue] = React.useState(defaultDate); + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + classNames={{ + content: "w-full", + }} + focusedValue={value} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setValue} + /> +
    + ); +} diff --git a/apps/docs/content/components/calendar/presets.ts b/apps/docs/content/components/calendar/presets.ts index f6e9d8591..334d59a76 100644 --- a/apps/docs/content/components/calendar/presets.ts +++ b/apps/docs/content/components/calendar/presets.ts @@ -1,185 +1,15 @@ -const App = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [value, setValue] = React.useState(defaultDate); - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - classNames={{ - content: "w-full", - }} - focusedValue={value} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setValue} - /> -
    - ); -}`; - -const AppTs = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [value, setValue] = React.useState(defaultDate); - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - classNames={{ - content: "w-full", - }} - focusedValue={value} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setValue} - /> -
    - ); -}`; +import App from "./presets.raw.jsx?raw"; +import AppTs from "./presets.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/read-only.raw.jsx b/apps/docs/content/components/calendar/read-only.raw.jsx new file mode 100644 index 000000000..ff58e4fbb --- /dev/null +++ b/apps/docs/content/components/calendar/read-only.raw.jsx @@ -0,0 +1,6 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/read-only.ts b/apps/docs/content/components/calendar/read-only.ts index 6fffcd20a..caf4be10c 100644 --- a/apps/docs/content/components/calendar/read-only.ts +++ b/apps/docs/content/components/calendar/read-only.ts @@ -1,15 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx new file mode 100644 index 000000000..b08a78b9d --- /dev/null +++ b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx @@ -0,0 +1,23 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + let {locale} = useLocale(); + + let isDateUnavailable = (date) => + isWeekend(date, locale) || + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ); + + return ; +} diff --git a/apps/docs/content/components/calendar/unavailable-dates.ts b/apps/docs/content/components/calendar/unavailable-dates.ts index 9a884fb2a..b4e1f4df1 100644 --- a/apps/docs/content/components/calendar/unavailable-dates.ts +++ b/apps/docs/content/components/calendar/unavailable-dates.ts @@ -1,32 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - let {locale} = useLocale(); - - let isDateUnavailable = (date) => - isWeekend(date, locale) || - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ); - - return ( - - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/usage.raw.jsx b/apps/docs/content/components/calendar/usage.raw.jsx new file mode 100644 index 000000000..5d2d03dd0 --- /dev/null +++ b/apps/docs/content/components/calendar/usage.raw.jsx @@ -0,0 +1,11 @@ +import {Calendar} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/calendar/usage.ts b/apps/docs/content/components/calendar/usage.ts index 0a97b863c..1118304c3 100644 --- a/apps/docs/content/components/calendar/usage.ts +++ b/apps/docs/content/components/calendar/usage.ts @@ -1,14 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {parseDate} from '@internationalized/date'; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/visible-months.raw.jsx b/apps/docs/content/components/calendar/visible-months.raw.jsx new file mode 100644 index 000000000..bf0c6aff7 --- /dev/null +++ b/apps/docs/content/components/calendar/visible-months.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/visible-months.ts b/apps/docs/content/components/calendar/visible-months.ts index 796fc6d9b..38c2db8f0 100644 --- a/apps/docs/content/components/calendar/visible-months.ts +++ b/apps/docs/content/components/calendar/visible-months.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./visible-months.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx new file mode 100644 index 000000000..a6a3c5686 --- /dev/null +++ b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.ts b/apps/docs/content/components/calendar/with-month-and-year-picker.ts index 177498450..53df2d136 100644 --- a/apps/docs/content/components/calendar/with-month-and-year-picker.ts +++ b/apps/docs/content/components/calendar/with-month-and-year-picker.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./with-month-and-year-picker.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/blurred-footer.raw.jsx b/apps/docs/content/components/card/blurred-footer.raw.jsx new file mode 100644 index 000000000..5d3be92b5 --- /dev/null +++ b/apps/docs/content/components/card/blurred-footer.raw.jsx @@ -0,0 +1,27 @@ +import {Card, CardFooter, Image, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + Woman listing to music + +

    Available soon.

    + +     +     + ); +} diff --git a/apps/docs/content/components/card/blurred-footer.ts b/apps/docs/content/components/card/blurred-footer.ts index ba3e83bd8..a3fd650d0 100644 --- a/apps/docs/content/components/card/blurred-footer.ts +++ b/apps/docs/content/components/card/blurred-footer.ts @@ -1,28 +1,4 @@ -const App = `import {Card, CardFooter, Image, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - Woman listing to music - -

    Available soon.

    - -     -     - ); -}`; +import App from "./blurred-footer.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/blurred.raw.jsx b/apps/docs/content/components/card/blurred.raw.jsx new file mode 100644 index 000000000..bdf580ae9 --- /dev/null +++ b/apps/docs/content/components/card/blurred.raw.jsx @@ -0,0 +1,264 @@ +import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react"; + +export const HeartIcon = ({ + size = 24, + width, + height, + strokeWidth = 1.5, + fill = "none", + ...props +}) => { + return ( + + ); +}; + +export const PauseCircleIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const NextIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const PreviousIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const RepeatOneIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const ShuffleIcon = ({size = 24, width, height, ...props}) => { + reutrn( + , + ); +}; + +export default function App() { + const [liked, setLiked] = React.useState(false); + + return ( + + +
    +
    + Album cover +
    + +
    +
    +
    +

    Daily Mix

    +

    12 Tracks

    +

    Frontend Radio

    +
    + +
    + +
    + +
    +

    1:23

    +

    4:32

    +
    +
    + +
    + + + + + +
    +
    +
    +     +     + ); +} diff --git a/apps/docs/content/components/card/blurred.ts b/apps/docs/content/components/card/blurred.ts index 8ba66a5ac..0c08e28f9 100644 --- a/apps/docs/content/components/card/blurred.ts +++ b/apps/docs/content/components/card/blurred.ts @@ -1,270 +1,7 @@ -const HearIcon = `export const HeartIcon = ({ - size = 24, - width, - height, - strokeWidth = 1.5, - fill = "none", - ...props -}) => ( - -);`; - -const PauseCircleIcon = `export const PauseCircleIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const NextIcon = `export const NextIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const PreviousIcon = `export const PreviousIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const RepeatOneIcon = `export const RepeatOneIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const App = `import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react"; -import {HeartIcon} from "./HeartIcon"; -import {PauseCircleIcon} from "./PauseCircleIcon"; -import {NextIcon} from "./NextIcon"; -import {PreviousIcon} from "./PreviousIcon"; -import {RepeatOneIcon} from "./RepeatOneIcon"; -import {ShuffleIcon} from "./ShuffleIcon"; - -export default function App() { - const [liked, setLiked] = React.useState(false); - - return ( - - -
    -
    - Album cover -
    - -
    -
    -
    -

    Daily Mix

    -

    12 Tracks

    -

    Frontend Radio

    -
    - -
    - -
    - -
    -

    1:23

    -

    4:32

    -
    -
    - -
    - - - - - -
    -
    -
    -     -     - ); -}`; +import App from "./blurred.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HeartIcon.jsx": HearIcon, - "/PauseCircleIcon.jsx": PauseCircleIcon, - "/NextIcon.jsx": NextIcon, - "/PreviousIcon.jsx": PreviousIcon, - "/RepeatOneIcon.jsx": RepeatOneIcon, - "/ShuffleIcon.jsx": ShuffleIcon, }; export default { diff --git a/apps/docs/content/components/card/composition.raw.jsx b/apps/docs/content/components/card/composition.raw.jsx new file mode 100644 index 000000000..0cfc1e93e --- /dev/null +++ b/apps/docs/content/components/card/composition.raw.jsx @@ -0,0 +1,53 @@ +import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react"; + +export default function App() { + const [isFollowed, setIsFollowed] = React.useState(false); + + return ( + + +
    + +
    +

    Zoey Lang

    +
    @zoeylang
    +
    +
    + +     + +

    Frontend developer and UI/UX enthusiast. Join me on this coding adventure!

    + + #FrontendWithZoey + + 💻 + + +     + +
    +

    4

    +

    Following

    +
    +
    +

    97.1K

    +

    Followers

    +
    +     +     + ); +} diff --git a/apps/docs/content/components/card/composition.ts b/apps/docs/content/components/card/composition.ts index 821d5a8bf..82a0d549f 100644 --- a/apps/docs/content/components/card/composition.ts +++ b/apps/docs/content/components/card/composition.ts @@ -1,53 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react"; - -export default function App() { - const [isFollowed, setIsFollowed] = React.useState(false); - - return ( - - -
    - -
    -

    Zoey Lang

    -
    @zoeylang
    -
    -
    - -     - -

    - Frontend developer and UI/UX enthusiast. Join me on this coding adventure! -

    - - #FrontendWithZoey - - 💻 - - -     - -
    -

    4

    -

    Following

    -
    -
    -

    97.1K

    -

    Followers

    -
    -     -     - ); -}`; +import App from "./composition.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/cover-image.raw.jsx b/apps/docs/content/components/card/cover-image.raw.jsx new file mode 100644 index 000000000..e50eccf2c --- /dev/null +++ b/apps/docs/content/components/card/cover-image.raw.jsx @@ -0,0 +1,93 @@ +import {Card, CardHeader, CardFooter, Image, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + +

    What to watch

    +

    Stream the Acme event

    +     + Card background +     + + +

    Plant a tree

    +

    Contribute to the planet

    +     + Card background +     + + +

    Supercharged

    +

    Creates beauty like a beast

    +     + Card background +     + + +

    New

    +

    Acme camera

    +     + Card example background + +
    +

    Available soon.

    +

    Get notified.

    +
    + +     +     + + +

    Your day your way

    +

    Your checklist for better sleep

    +     + Relaxing app background + +
    + Breathing app icon +
    +

    Breathing App

    +

    Get a good night's sleep.

    +
    +
    + +     +     +
    + ); +} diff --git a/apps/docs/content/components/card/cover-image.ts b/apps/docs/content/components/card/cover-image.ts index 795f95514..80517c854 100644 --- a/apps/docs/content/components/card/cover-image.ts +++ b/apps/docs/content/components/card/cover-image.ts @@ -1,94 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, CardFooter, Image, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - -

    What to watch

    -

    Stream the Acme event

    -     - Card background -     - - -

    Plant a tree

    -

    Contribute to the planet

    -     - Card background -     - - -

    Supercharged

    -

    Creates beauty like a beast

    -     - Card background -     - - -

    New

    -

    Acme camera

    -     - Card example background - -
    -

    Available soon.

    -

    Get notified.

    -
    - -     -     - - -

    Your day your way

    -

    Your checklist for better sleep

    -     - Relaxing app background - -
    - Breathing app icon -
    -

    Breathing App

    -

    Get a good night's sleep.

    -
    -
    - -     -     -
    - ); -}`; +import App from "./cover-image.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/divider.raw.jsx b/apps/docs/content/components/card/divider.raw.jsx new file mode 100644 index 000000000..09c8a0d90 --- /dev/null +++ b/apps/docs/content/components/card/divider.raw.jsx @@ -0,0 +1,31 @@ +import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react"; + +export default function App() { + return ( + + + nextui logo +
    +

    NextUI

    +

    nextui.org

    +
    +     + + +

    Make beautiful websites regardless of your design experience.

    +     + + + + Visit source code on GitHub. + + +     + ); +} diff --git a/apps/docs/content/components/card/divider.ts b/apps/docs/content/components/card/divider.ts index b482a6acb..b6500e8d6 100644 --- a/apps/docs/content/components/card/divider.ts +++ b/apps/docs/content/components/card/divider.ts @@ -1,38 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react"; - -export default function App() { - return ( - - - nextui logo -
    -

    NextUI

    -

    nextui.org

    -
    -     - - -

    Make beautiful websites regardless of your design experience.

    -     - - - - Visit source code on GitHub. - - -     - ); -}`; +import App from "./divider.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/image.raw.jsx b/apps/docs/content/components/card/image.raw.jsx new file mode 100644 index 000000000..54be0bbb4 --- /dev/null +++ b/apps/docs/content/components/card/image.raw.jsx @@ -0,0 +1,21 @@ +import {Card, CardHeader, CardBody, Image} from "@nextui-org/react"; + +export default function App() { + return ( + + +

    Daily Mix

    + 12 Tracks +

    Frontend Radio

    +     + + Card background + +     + ); +} diff --git a/apps/docs/content/components/card/image.ts b/apps/docs/content/components/card/image.ts index 08e2d16c1..30e67acb4 100644 --- a/apps/docs/content/components/card/image.ts +++ b/apps/docs/content/components/card/image.ts @@ -1,24 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, Image} from "@nextui-org/react"; - -export default function App() { - return ( - - -

    Daily Mix

    - 12 Tracks -

    Frontend Radio

    -     - - Card background - -     - ); -}`; +import App from "./image.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/primary-action.raw.jsx b/apps/docs/content/components/card/primary-action.raw.jsx new file mode 100644 index 000000000..ce62f8b38 --- /dev/null +++ b/apps/docs/content/components/card/primary-action.raw.jsx @@ -0,0 +1,70 @@ +import {Card, CardBody, CardFooter, Image} from "@nextui-org/react"; + +export default function App() { + const list = [ + { + title: "Orange", + img: "/images/fruit-1.jpeg", + price: "$5.50", + }, + { + title: "Tangerine", + img: "/images/fruit-2.jpeg", + price: "$3.00", + }, + { + title: "Raspberry", + img: "/images/fruit-3.jpeg", + price: "$10.00", + }, + { + title: "Lemon", + img: "/images/fruit-4.jpeg", + price: "$5.30", + }, + { + title: "Avocado", + img: "/images/fruit-5.jpeg", + price: "$15.70", + }, + { + title: "Lemon 2", + img: "/images/fruit-6.jpeg", + price: "$8.00", + }, + { + title: "Banana", + img: "/images/fruit-7.jpeg", + price: "$7.50", + }, + { + title: "Watermelon", + img: "/images/fruit-8.jpeg", + price: "$12.20", + }, + ]; + + return ( +
    + {list.map((item, index) => ( + /* eslint-disable no-console */ + console.log("item pressed")}> + + {item.title} + + + {item.title} +

    {item.price}

    +     +     + ))} +
    + ); +} diff --git a/apps/docs/content/components/card/primary-action.ts b/apps/docs/content/components/card/primary-action.ts index 0d36aef25..78338d94a 100644 --- a/apps/docs/content/components/card/primary-action.ts +++ b/apps/docs/content/components/card/primary-action.ts @@ -1,72 +1,4 @@ -const App = `import {Card, CardBody, CardFooter, Image} from "@nextui-org/react"; - -export default function App() { - const list = [ - { - title: "Orange", - img: "/images/fruit-1.jpeg", - price: "$5.50", - }, - { - title: "Tangerine", - img: "/images/fruit-2.jpeg", - price: "$3.00", - }, - { - title: "Raspberry", - img: "/images/fruit-3.jpeg", - price: "$10.00", - }, - { - title: "Lemon", - img: "/images/fruit-4.jpeg", - price: "$5.30", - }, - { - title: "Avocado", - img: "/images/fruit-5.jpeg", - price: "$15.70", - }, - { - title: "Lemon 2", - img: "/images/fruit-6.jpeg", - price: "$8.00", - }, - { - title: "Banana", - img: "/images/fruit-7.jpeg", - price: "$7.50", - }, - { - title: "Watermelon", - img: "/images/fruit-8.jpeg", - price: "$12.20", - }, - ]; - - return ( -
    - {list.map((item, index) => ( - console.log("item pressed")}> - - {item.title} - - - {item.title} -

    {item.price}

    -     -     - ))} -
    - ); -}`; +import App from "./primary-action.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/usage.raw.jsx b/apps/docs/content/components/card/usage.raw.jsx new file mode 100644 index 000000000..34167f151 --- /dev/null +++ b/apps/docs/content/components/card/usage.raw.jsx @@ -0,0 +1,11 @@ +import {Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( + + +

    Make beautiful websites regardless of your design experience.

    +     +     + ); +} diff --git a/apps/docs/content/components/card/usage.ts b/apps/docs/content/components/card/usage.ts index 5ad425b26..1118304c3 100644 --- a/apps/docs/content/components/card/usage.ts +++ b/apps/docs/content/components/card/usage.ts @@ -1,14 +1,4 @@ -const App = `import {Card, CardBody} from "@nextui-org/react"; - -export default function App() { - return ( - - -

    Make beautiful websites regardless of your design experience.

    -     -     - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/controlled.raw.jsx b/apps/docs/content/components/checkbox-group/controlled.raw.jsx new file mode 100644 index 000000000..c31698353 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/controlled.raw.jsx @@ -0,0 +1,21 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]); + + return ( +
    + + Buenos Aires + Sydney + San Francisco + +

    Selected: {selected.join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/checkbox-group/controlled.ts b/apps/docs/content/components/checkbox-group/controlled.ts index 708b214cb..2c3f0cacb 100644 --- a/apps/docs/content/components/checkbox-group/controlled.ts +++ b/apps/docs/content/components/checkbox-group/controlled.ts @@ -1,24 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]); - - return ( -
    - - Buenos Aires - Sydney - San Francisco - -

    Selected: {selected.join(", ")}

    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx new file mode 100644 index 000000000..fe4324f75 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx @@ -0,0 +1,94 @@ +import {useCheckbox, CheckboxGroup, Chip, VisuallyHidden, tv} from "@nextui-org/react"; + +const checkbox = tv({ + slots: { + base: "border-default hover:bg-default-200", + content: "text-default-500", + }, + variants: { + isSelected: { + true: { + base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", + content: "text-primary-foreground pl-1", + }, + }, + isFocusVisible: { + true: { + base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", + }, + }, + }, +}); + +export const CustomCheckbox = (props) => { + const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} = + useCheckbox({ + ...props, + }); + + const styles = checkbox({isSelected, isFocusVisible}); + + return ( + + ); +}; + +export const CheckIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [groupSelected, setGroupSelected] = React.useState([]); + + return ( +
    + + Wifi + TV + Kitchen + Parking + Pool + Gym + +

    Selected: {groupSelected.join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.ts b/apps/docs/content/components/checkbox-group/custom-implementation.ts index 7a5084808..cf79f4d84 100644 --- a/apps/docs/content/components/checkbox-group/custom-implementation.ts +++ b/apps/docs/content/components/checkbox-group/custom-implementation.ts @@ -1,113 +1,7 @@ -const CheckIcon = `export const CheckIcon = (props) => - ( - - );`; - -const CustomCheckbox = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; -import {CheckIcon} from './CheckIcon.jsx' - -const checkbox = tv({ - slots: { - base: "border-default hover:bg-default-200", - content: "text-default-500" - }, - variants: { - isSelected: { - true: { - base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", - content: "text-primary-foreground pl-1" - } - }, - isFocusVisible: { - true: { - base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", - } - } - } -}) - -export const CustomCheckbox = (props) => { - const { - children, - isSelected, - isFocusVisible, - getBaseProps, - getLabelProps, - getInputProps, - } = useCheckbox({ - ...props - }) - - const styles = checkbox({ isSelected, isFocusVisible }) - - return ( - - ); -}`; - -const App = `import {CheckboxGroup} from "@nextui-org/react"; -import {CustomCheckbox} from "./CustomCheckbox"; - -export default function App() { - const [groupSelected, setGroupSelected] = React.useState([]); - - return ( -
    - - Wifi - TV - Kitchen - Parking - Pool - Gym - -

    - Selected: {groupSelected.join(", ")} -

    -
    - ); -}`; +import App from "./custom-implementation.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CustomCheckbox.jsx": CustomCheckbox, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx b/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx new file mode 100644 index 000000000..94ae0969b --- /dev/null +++ b/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx @@ -0,0 +1,104 @@ +import {Checkbox, CheckboxGroup, Link, User, Chip, cn} from "@nextui-org/react"; + +export const CustomCheckbox = ({user, statusColor, value}) => { + return ( + +
    + + @{user.username} + + } + name={user.name} + /> +
    + {user.role} + + {user.status} + +
    +
    +     + ); +}; + +export default function App() { + const [groupSelected, setGroupSelected] = React.useState([]); + + return ( +
    + + + + + + +

    Selected: {groupSelected.join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/checkbox-group/custom-styles.ts b/apps/docs/content/components/checkbox-group/custom-styles.ts index e1b0be447..da3ea9093 100644 --- a/apps/docs/content/components/checkbox-group/custom-styles.ts +++ b/apps/docs/content/components/checkbox-group/custom-styles.ts @@ -1,116 +1,7 @@ -const CustomCheckbox = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react"; - -export const CustomCheckbox = ({ user, statusColor, value }) => { - return ( - -
    - - @{user.username} - - } - name={user.name} - /> -
    - {user.role} - - {user.status} - -
    -
    -     - ); -};`; - -const App = `import {CheckboxGroup} from "@nextui-org/react"; -import {CustomCheckbox} from "./CustomCheckbox"; - -export default function App() { - const [groupSelected, setGroupSelected] = React.useState([]); - - return ( -
    - - - - - - -

    - Selected: {groupSelected.join(", ")} -

    -
    - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CustomCheckbox.jsx": CustomCheckbox, }; export default { diff --git a/apps/docs/content/components/checkbox-group/disabled.raw.jsx b/apps/docs/content/components/checkbox-group/disabled.raw.jsx new file mode 100644 index 000000000..9f71a07c1 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/disabled.ts b/apps/docs/content/components/checkbox-group/disabled.ts index 6ae54731a..1a215cc91 100644 --- a/apps/docs/content/components/checkbox-group/disabled.ts +++ b/apps/docs/content/components/checkbox-group/disabled.ts @@ -1,20 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/horizontal.raw.jsx b/apps/docs/content/components/checkbox-group/horizontal.raw.jsx new file mode 100644 index 000000000..4555eb346 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/horizontal.raw.jsx @@ -0,0 +1,18 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/horizontal.ts b/apps/docs/content/components/checkbox-group/horizontal.ts index b5083f40a..60be4b407 100644 --- a/apps/docs/content/components/checkbox-group/horizontal.ts +++ b/apps/docs/content/components/checkbox-group/horizontal.ts @@ -1,21 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./horizontal.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/invalid.raw.jsx b/apps/docs/content/components/checkbox-group/invalid.raw.jsx new file mode 100644 index 000000000..a587998c5 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/invalid.raw.jsx @@ -0,0 +1,23 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + const [isInvalid, setIsInvalid] = React.useState(true); + + return ( + { + setIsInvalid(value.length < 1); + }} + > + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/invalid.ts b/apps/docs/content/components/checkbox-group/invalid.ts index 60dffaff8..a02a8fe9c 100644 --- a/apps/docs/content/components/checkbox-group/invalid.ts +++ b/apps/docs/content/components/checkbox-group/invalid.ts @@ -1,26 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - const [isInvalid, setIsInvalid] = React.useState(true); - - return ( - { - setIsInvalid(value.length < 1); - }} - > - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./invalid.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/usage.raw.jsx b/apps/docs/content/components/checkbox-group/usage.raw.jsx new file mode 100644 index 000000000..790946777 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/usage.raw.jsx @@ -0,0 +1,13 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/usage.ts b/apps/docs/content/components/checkbox-group/usage.ts index 8867a1d86..1118304c3 100644 --- a/apps/docs/content/components/checkbox-group/usage.ts +++ b/apps/docs/content/components/checkbox-group/usage.ts @@ -1,19 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/colors.raw.jsx b/apps/docs/content/components/checkbox/colors.raw.jsx new file mode 100644 index 000000000..1444356a3 --- /dev/null +++ b/apps/docs/content/components/checkbox/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Default + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
    + ); +} diff --git a/apps/docs/content/components/checkbox/colors.ts b/apps/docs/content/components/checkbox/colors.ts index a7d318f73..d5bef810a 100644 --- a/apps/docs/content/components/checkbox/colors.ts +++ b/apps/docs/content/components/checkbox/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Default - Primary - Secondary - Success - Warning - Danger -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/controlled.raw.jsx b/apps/docs/content/components/checkbox/controlled.raw.jsx new file mode 100644 index 000000000..4d81052b0 --- /dev/null +++ b/apps/docs/content/components/checkbox/controlled.raw.jsx @@ -0,0 +1,14 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + const [isSelected, setIsSelected] = React.useState(false); + + return ( +
    + + Subscribe (controlled) + +

    Selected: {isSelected ? "true" : "false"}

    +
    + ); +} diff --git a/apps/docs/content/components/checkbox/controlled.ts b/apps/docs/content/components/checkbox/controlled.ts index 61c09eb3a..2c3f0cacb 100644 --- a/apps/docs/content/components/checkbox/controlled.ts +++ b/apps/docs/content/components/checkbox/controlled.ts @@ -1,19 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - const [isSelected, setIsSelected] = React.useState(false); - - return ( -
    - - Subscribe (controlled) - -

    - Selected: {isSelected ? "true" : "false"} -

    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx new file mode 100644 index 000000000..bea37878e --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx @@ -0,0 +1,68 @@ +import {Checkbox} from "@nextui-org/react"; + +export const HeartIcon = ({size, height, width, ...props}) => { + // avoid passing non-DOM attributes to svg + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; + + return ( + + + + ); +}; + +export const PlusIcon = ({size, height, width, ...props}) => { + // avoid passing non-DOM attributes to svg + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; + + return ( + + + + + ); +}; + +export default function App() { + return ( +
    + }> + Option + + }> + Option + +
    + ); +} diff --git a/apps/docs/content/components/checkbox/custom-check-icon.ts b/apps/docs/content/components/checkbox/custom-check-icon.ts index 5bd83fa32..6f2bd3d13 100644 --- a/apps/docs/content/components/checkbox/custom-check-icon.ts +++ b/apps/docs/content/components/checkbox/custom-check-icon.ts @@ -1,73 +1,7 @@ -const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => { - // avoid passing non-DOM attributes to svg - const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; - - return ( - - - - ); -}; -`; - -const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => { - // avoid passing non-DOM attributes to svg - const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; - - return ( - - - - - ); -};`; - -const App = `import {Checkbox} from "@nextui-org/react"; -import {HeartIcon} from './HeartIcon.jsx'; -import {PlusIcon} from './PlusIcon.jsx'; - -export default function App() { - return ( -
    - }>Option - } color="warning">Option -
    - ); -}`; +import App from "./custom-check-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HeartIcon.jsx": HeartIcon, - "/PlusIcon.jsx": PlusIcon, }; export default { diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx new file mode 100644 index 000000000..0d7e50171 --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx @@ -0,0 +1,70 @@ +import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; + +export const CheckIcon = (props) => { + return ( + + ); +}; + +const checkbox = tv({ + slots: { + base: "border-default hover:bg-default-200", + content: "text-default-500", + }, + variants: { + isSelected: { + true: { + base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", + content: "text-primary-foreground pl-1", + }, + }, + isFocusVisible: { + true: { + base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", + }, + }, + }, +}); + +export default function App() { + const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} = + useCheckbox({ + defaultSelected: true, + }); + + const styles = checkbox({isSelected, isFocusVisible}); + + return ( + + ); +} diff --git a/apps/docs/content/components/checkbox/custom-implementation.ts b/apps/docs/content/components/checkbox/custom-implementation.ts index 6c7300669..cf79f4d84 100644 --- a/apps/docs/content/components/checkbox/custom-implementation.ts +++ b/apps/docs/content/components/checkbox/custom-implementation.ts @@ -1,83 +1,7 @@ -const CheckIcon = `export const CheckIcon = (props) => - ( - - );`; - -const App = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; -import {CheckIcon} from './CheckIcon.jsx' - -const checkbox = tv({ - slots: { - base: "border-default hover:bg-default-200", - content: "text-default-500" - }, - variants: { - isSelected: { - true: { - base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", - content: "text-primary-foreground pl-1" - } - }, - isFocusVisible: { - true: { - base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", - } - } - } -}) - -export default function App() { - const { - children, - isSelected, - isFocusVisible, - getBaseProps, - getLabelProps, - getInputProps, - } = useCheckbox({ - defaultSelected: true, - }) - - const styles = checkbox({ isSelected, isFocusVisible }) - - return ( - - ); -}`; +import App from "./custom-implementation.raw.jsx?raw"; const react = { "/App.jsx": App, - "./CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/checkbox/custom-styles.raw.jsx b/apps/docs/content/components/checkbox/custom-styles.raw.jsx new file mode 100644 index 000000000..d3e98200e --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-styles.raw.jsx @@ -0,0 +1,49 @@ +import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react"; + +export default function App() { + const [isSelected, setIsSelected] = React.useState(false); + + const user = { + name: "Junior Garcia", + avatar: "https://avatars.githubusercontent.com/u/30373425?v=4", + username: "jrgarciadev", + url: "https://x.com/jrgarciadev", + role: "Software Developer", + status: "Active", + }; + + return ( + +
    + + @{user.username} + + } + name={user.name} + /> +
    + {user.role} + + {user.status} + +
    +
    +     + ); +} diff --git a/apps/docs/content/components/checkbox/custom-styles.ts b/apps/docs/content/components/checkbox/custom-styles.ts index 7484b1c45..da3ea9093 100644 --- a/apps/docs/content/components/checkbox/custom-styles.ts +++ b/apps/docs/content/components/checkbox/custom-styles.ts @@ -1,52 +1,4 @@ -const App = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react"; - -export default function App() { - const [isSelected, setIsSelected] = React.useState(false); - - const user = { - name: "Junior Garcia", - avatar: "https://avatars.githubusercontent.com/u/30373425?v=4", - username: "jrgarciadev", - url: "https://x.com/jrgarciadev", - role: "Software Developer", - status: "Active", - } - - return ( - -
    - - @{user.username} - - } - name={user.name} - /> -
    - {user.role} - - {user.status} - -
    -
    -     - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/disabled.raw.jsx b/apps/docs/content/components/checkbox/disabled.raw.jsx new file mode 100644 index 000000000..c92dd3711 --- /dev/null +++ b/apps/docs/content/components/checkbox/disabled.raw.jsx @@ -0,0 +1,12 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
    + Option + + Option + +
    + ); +} diff --git a/apps/docs/content/components/checkbox/disabled.ts b/apps/docs/content/components/checkbox/disabled.ts index 23f637e68..1a215cc91 100644 --- a/apps/docs/content/components/checkbox/disabled.ts +++ b/apps/docs/content/components/checkbox/disabled.ts @@ -1,13 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Option - Option -
    - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/indeterminate.raw.jsx b/apps/docs/content/components/checkbox/indeterminate.raw.jsx new file mode 100644 index 000000000..0bc185104 --- /dev/null +++ b/apps/docs/content/components/checkbox/indeterminate.raw.jsx @@ -0,0 +1,5 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return Option; +} diff --git a/apps/docs/content/components/checkbox/indeterminate.ts b/apps/docs/content/components/checkbox/indeterminate.ts index bc9ad778a..7094e4295 100644 --- a/apps/docs/content/components/checkbox/indeterminate.ts +++ b/apps/docs/content/components/checkbox/indeterminate.ts @@ -1,10 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - Option - ); -}`; +import App from "./indeterminate.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/line-through.raw.jsx b/apps/docs/content/components/checkbox/line-through.raw.jsx new file mode 100644 index 000000000..4e4408c21 --- /dev/null +++ b/apps/docs/content/components/checkbox/line-through.raw.jsx @@ -0,0 +1,9 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Option + + ); +} diff --git a/apps/docs/content/components/checkbox/line-through.ts b/apps/docs/content/components/checkbox/line-through.ts index ce5f7e3d2..f4c8aaa85 100644 --- a/apps/docs/content/components/checkbox/line-through.ts +++ b/apps/docs/content/components/checkbox/line-through.ts @@ -1,10 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - Option - ); -}`; +import App from "./line-through.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/radius.raw.jsx b/apps/docs/content/components/checkbox/radius.raw.jsx new file mode 100644 index 000000000..cabb65bcd --- /dev/null +++ b/apps/docs/content/components/checkbox/radius.raw.jsx @@ -0,0 +1,23 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Full + + + Large + + + Medium + + + Small + + + None + +
    + ); +} diff --git a/apps/docs/content/components/checkbox/radius.ts b/apps/docs/content/components/checkbox/radius.ts index a8446ab90..7b78db1ce 100644 --- a/apps/docs/content/components/checkbox/radius.ts +++ b/apps/docs/content/components/checkbox/radius.ts @@ -1,16 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Full - Large - Medium - Small - None -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/sizes.raw.jsx b/apps/docs/content/components/checkbox/sizes.raw.jsx new file mode 100644 index 000000000..3e3c51a9e --- /dev/null +++ b/apps/docs/content/components/checkbox/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Small + + + Medium + + + Large + +
    + ); +} diff --git a/apps/docs/content/components/checkbox/sizes.ts b/apps/docs/content/components/checkbox/sizes.ts index 7dc596b4e..85a2f5b30 100644 --- a/apps/docs/content/components/checkbox/sizes.ts +++ b/apps/docs/content/components/checkbox/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Small - Medium - Large -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/usage.raw.jsx b/apps/docs/content/components/checkbox/usage.raw.jsx new file mode 100644 index 000000000..050e56a5a --- /dev/null +++ b/apps/docs/content/components/checkbox/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return Option; +} diff --git a/apps/docs/content/components/checkbox/usage.ts b/apps/docs/content/components/checkbox/usage.ts index e7b4a84d9..1118304c3 100644 --- a/apps/docs/content/components/checkbox/usage.ts +++ b/apps/docs/content/components/checkbox/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - Option - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/avatar.raw.jsx b/apps/docs/content/components/chip/avatar.raw.jsx new file mode 100644 index 000000000..1eef36faa --- /dev/null +++ b/apps/docs/content/components/chip/avatar.raw.jsx @@ -0,0 +1,20 @@ +import {Chip, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
    + } + variant="flat" + > + Avatar + + name.charAt(0)} name="JW" size="sm" />} + variant="flat" + > + Avatar + +
    + ); +} diff --git a/apps/docs/content/components/chip/avatar.ts b/apps/docs/content/components/chip/avatar.ts index d0a767543..4d86784b8 100644 --- a/apps/docs/content/components/chip/avatar.ts +++ b/apps/docs/content/components/chip/avatar.ts @@ -1,30 +1,4 @@ -const App = `import {Chip, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - } - > - Avatar - - name.charAt(0)} /> - } - > - Avatar - -
    - ); -}`; +import App from "./avatar.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/close-button.raw.jsx b/apps/docs/content/components/chip/close-button.raw.jsx new file mode 100644 index 000000000..5e55351dd --- /dev/null +++ b/apps/docs/content/components/chip/close-button.raw.jsx @@ -0,0 +1,14 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
    + {/* eslint-disable no-console */} + console.log("close")}>Chip + {/* eslint-disable no-console */} + console.log("close")}> + Chip + +
    + ); +} diff --git a/apps/docs/content/components/chip/close-button.ts b/apps/docs/content/components/chip/close-button.ts index 096eeba7d..f0fdaba6b 100644 --- a/apps/docs/content/components/chip/close-button.ts +++ b/apps/docs/content/components/chip/close-button.ts @@ -1,15 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
    - console.log("close")}>Chip - console.log("close")} variant="bordered"> - Chip - -
    - ); -}`; +import App from "./close-button.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/colors.raw.jsx b/apps/docs/content/components/chip/colors.raw.jsx new file mode 100644 index 000000000..c61777b16 --- /dev/null +++ b/apps/docs/content/components/chip/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
    + Default + Primary + Secondary + Success + Warning + Danger +
    + ); +} diff --git a/apps/docs/content/components/chip/colors.ts b/apps/docs/content/components/chip/colors.ts index ac0f61f8f..d5bef810a 100644 --- a/apps/docs/content/components/chip/colors.ts +++ b/apps/docs/content/components/chip/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Default - Primary - Secondary - Success - Warning - Danger -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/custom-styles.raw.jsx b/apps/docs/content/components/chip/custom-styles.raw.jsx new file mode 100644 index 000000000..61979d0db --- /dev/null +++ b/apps/docs/content/components/chip/custom-styles.raw.jsx @@ -0,0 +1,15 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( + + New + + ); +} diff --git a/apps/docs/content/components/chip/custom-styles.ts b/apps/docs/content/components/chip/custom-styles.ts index df7846789..da3ea9093 100644 --- a/apps/docs/content/components/chip/custom-styles.ts +++ b/apps/docs/content/components/chip/custom-styles.ts @@ -1,18 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( - - New - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/disabled.raw.jsx b/apps/docs/content/components/chip/disabled.raw.jsx new file mode 100644 index 000000000..28ac8dfe8 --- /dev/null +++ b/apps/docs/content/components/chip/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( + + Chip + + ); +} diff --git a/apps/docs/content/components/chip/disabled.ts b/apps/docs/content/components/chip/disabled.ts index 15a8dd3a2..1a215cc91 100644 --- a/apps/docs/content/components/chip/disabled.ts +++ b/apps/docs/content/components/chip/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( - Chip - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/list.raw.jsx b/apps/docs/content/components/chip/list.raw.jsx new file mode 100644 index 000000000..32757cd87 --- /dev/null +++ b/apps/docs/content/components/chip/list.raw.jsx @@ -0,0 +1,24 @@ +import {Chip} from "@nextui-org/react"; + +const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]; + +export default function App() { + const [fruits, setFruits] = React.useState(initialFruits); + + const handleClose = (fruitToRemove) => { + setFruits(fruits.filter((fruit) => fruit !== fruitToRemove)); + if (fruits.length === 1) { + setFruits(initialFruits); + } + }; + + return ( +
    + {fruits.map((fruit, index) => ( + handleClose(fruit)}> + {fruit} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/chip/list.ts b/apps/docs/content/components/chip/list.ts index 8676a0601..2caeebc92 100644 --- a/apps/docs/content/components/chip/list.ts +++ b/apps/docs/content/components/chip/list.ts @@ -1,27 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"] - -export default function App() { - const [fruits, setFruits] = React.useState(initialFruits); - - const handleClose = (fruitToRemove) => { - setFruits(fruits.filter(fruit => fruit !== fruitToRemove)); - if (fruits.length === 1) { - setFruits(initialFruits); - } - }; - - return ( -
    - {fruits.map((fruit, index) => ( - handleClose(fruit)} variant="flat"> - {fruit} - - ))} -
    - ); -}`; +import App from "./list.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/radius.raw.jsx b/apps/docs/content/components/chip/radius.raw.jsx new file mode 100644 index 000000000..2f320071a --- /dev/null +++ b/apps/docs/content/components/chip/radius.raw.jsx @@ -0,0 +1,12 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
    + Full + Large + Medium + Small +
    + ); +} diff --git a/apps/docs/content/components/chip/radius.ts b/apps/docs/content/components/chip/radius.ts index e53280621..7b78db1ce 100644 --- a/apps/docs/content/components/chip/radius.ts +++ b/apps/docs/content/components/chip/radius.ts @@ -1,15 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Full - Large - Medium - Small -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/sizes.raw.jsx b/apps/docs/content/components/chip/sizes.raw.jsx new file mode 100644 index 000000000..c02511ab8 --- /dev/null +++ b/apps/docs/content/components/chip/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
    + Small + Medium + Large +
    + ); +} diff --git a/apps/docs/content/components/chip/sizes.ts b/apps/docs/content/components/chip/sizes.ts index 72db21853..85a2f5b30 100644 --- a/apps/docs/content/components/chip/sizes.ts +++ b/apps/docs/content/components/chip/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Small - Medium - Large -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/start-end-content.raw.jsx b/apps/docs/content/components/chip/start-end-content.raw.jsx new file mode 100644 index 000000000..f901308ec --- /dev/null +++ b/apps/docs/content/components/chip/start-end-content.raw.jsx @@ -0,0 +1,52 @@ +import {Chip} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CheckIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
    + } variant="faded"> + Chip + + } variant="flat"> + Chip + +
    + ); +} diff --git a/apps/docs/content/components/chip/start-end-content.ts b/apps/docs/content/components/chip/start-end-content.ts index 415216b80..e99c7e599 100644 --- a/apps/docs/content/components/chip/start-end-content.ts +++ b/apps/docs/content/components/chip/start-end-content.ts @@ -1,72 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -export const CheckIcon = `export const CheckIcon = ({ - size, - height, - width, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Chip} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; -import {CheckIcon} from "./CheckIcon"; - -export default function App() { - return ( -
    - } - variant="faded" - color="success" - > - Chip - - } - variant="flat" - color="secondary" - > - Chip - -
    - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/chip/usage.raw.jsx b/apps/docs/content/components/chip/usage.raw.jsx new file mode 100644 index 000000000..0a4eda3a3 --- /dev/null +++ b/apps/docs/content/components/chip/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return Chip; +} diff --git a/apps/docs/content/components/chip/usage.ts b/apps/docs/content/components/chip/usage.ts index d8e05d0a6..1118304c3 100644 --- a/apps/docs/content/components/chip/usage.ts +++ b/apps/docs/content/components/chip/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( - Chip - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/variants.raw.jsx b/apps/docs/content/components/chip/variants.raw.jsx new file mode 100644 index 000000000..ad79cf087 --- /dev/null +++ b/apps/docs/content/components/chip/variants.raw.jsx @@ -0,0 +1,29 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Solid + + + Bordered + + + Light + + + Flat + + + Faded + + + Shadow + + + Dot + +
    + ); +} diff --git a/apps/docs/content/components/chip/variants.ts b/apps/docs/content/components/chip/variants.ts index 789397658..ddea95fb2 100644 --- a/apps/docs/content/components/chip/variants.ts +++ b/apps/docs/content/components/chip/variants.ts @@ -1,18 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Solid - Bordered - Light - Flat - Faded - Shadow - Dot -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/colors.raw.jsx b/apps/docs/content/components/circular-progress/colors.raw.jsx new file mode 100644 index 000000000..09e7cc6aa --- /dev/null +++ b/apps/docs/content/components/circular-progress/colors.raw.jsx @@ -0,0 +1,14 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/circular-progress/colors.ts b/apps/docs/content/components/circular-progress/colors.ts index 2a8fff62a..d5bef810a 100644 --- a/apps/docs/content/components/circular-progress/colors.ts +++ b/apps/docs/content/components/circular-progress/colors.ts @@ -1,17 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/custom-styles.raw.jsx b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx new file mode 100644 index 000000000..8e2f2d9e6 --- /dev/null +++ b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx @@ -0,0 +1,32 @@ +import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + 2800 Data points + + + + ); +} diff --git a/apps/docs/content/components/circular-progress/custom-styles.ts b/apps/docs/content/components/circular-progress/custom-styles.ts index 53b74c16c..da3ea9093 100644 --- a/apps/docs/content/components/circular-progress/custom-styles.ts +++ b/apps/docs/content/components/circular-progress/custom-styles.ts @@ -1,35 +1,4 @@ -const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - 2800 Data points - - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/label.raw.jsx b/apps/docs/content/components/circular-progress/label.raw.jsx new file mode 100644 index 000000000..7767e1e4f --- /dev/null +++ b/apps/docs/content/components/circular-progress/label.raw.jsx @@ -0,0 +1,5 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/circular-progress/label.ts b/apps/docs/content/components/circular-progress/label.ts index e9bd60e77..254b95afb 100644 --- a/apps/docs/content/components/circular-progress/label.ts +++ b/apps/docs/content/components/circular-progress/label.ts @@ -1,10 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/sizes.raw.jsx b/apps/docs/content/components/circular-progress/sizes.raw.jsx new file mode 100644 index 000000000..cdf5cdb24 --- /dev/null +++ b/apps/docs/content/components/circular-progress/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/circular-progress/sizes.ts b/apps/docs/content/components/circular-progress/sizes.ts index ef5050c7a..85a2f5b30 100644 --- a/apps/docs/content/components/circular-progress/sizes.ts +++ b/apps/docs/content/components/circular-progress/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/usage.raw.jsx b/apps/docs/content/components/circular-progress/usage.raw.jsx new file mode 100644 index 000000000..fb6ac8e2a --- /dev/null +++ b/apps/docs/content/components/circular-progress/usage.raw.jsx @@ -0,0 +1,5 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/circular-progress/usage.ts b/apps/docs/content/components/circular-progress/usage.ts index ab4db2bbd..1118304c3 100644 --- a/apps/docs/content/components/circular-progress/usage.ts +++ b/apps/docs/content/components/circular-progress/usage.ts @@ -1,10 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/value-formatting.raw.jsx b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx new file mode 100644 index 000000000..81112502d --- /dev/null +++ b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx @@ -0,0 +1,14 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/circular-progress/value-formatting.ts b/apps/docs/content/components/circular-progress/value-formatting.ts index 498c16ff2..0cd558d45 100644 --- a/apps/docs/content/components/circular-progress/value-formatting.ts +++ b/apps/docs/content/components/circular-progress/value-formatting.ts @@ -1,17 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./value-formatting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/value.raw.jsx b/apps/docs/content/components/circular-progress/value.raw.jsx new file mode 100644 index 000000000..fc075f67a --- /dev/null +++ b/apps/docs/content/components/circular-progress/value.raw.jsx @@ -0,0 +1,23 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0); + + React.useEffect(() => { + const interval = setInterval(() => { + setValue((v) => (v >= 100 ? 0 : v + 10)); + }, 500); + + return () => clearInterval(interval); + }, []); + + return ( + + ); +} diff --git a/apps/docs/content/components/circular-progress/value.ts b/apps/docs/content/components/circular-progress/value.ts index 1915a8890..e2de0e902 100644 --- a/apps/docs/content/components/circular-progress/value.ts +++ b/apps/docs/content/components/circular-progress/value.ts @@ -1,26 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0); - - React.useEffect(() => { - const interval = setInterval(() => { - setValue((v) => (v >= 100 ? 0 : v + 10)); - }, 500); - - return () => clearInterval(interval); - }, []); - - return ( - - ); -}`; +import App from "./value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/code/colors.raw.jsx b/apps/docs/content/components/code/colors.raw.jsx new file mode 100644 index 000000000..f80c81779 --- /dev/null +++ b/apps/docs/content/components/code/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Code} from "@nextui-org/react"; + +export default function App() { + return ( +
    + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
    + ); +} diff --git a/apps/docs/content/components/code/colors.ts b/apps/docs/content/components/code/colors.ts index 7c2641f20..d5bef810a 100644 --- a/apps/docs/content/components/code/colors.ts +++ b/apps/docs/content/components/code/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Code} from "@nextui-org/react"; - -export default function App() { - return ( -
    - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/code/sizes.raw.jsx b/apps/docs/content/components/code/sizes.raw.jsx new file mode 100644 index 000000000..51a27c7de --- /dev/null +++ b/apps/docs/content/components/code/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Code} from "@nextui-org/react"; + +export default function App() { + return ( +
    + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
    + ); +} diff --git a/apps/docs/content/components/code/sizes.ts b/apps/docs/content/components/code/sizes.ts index 9d1325376..85a2f5b30 100644 --- a/apps/docs/content/components/code/sizes.ts +++ b/apps/docs/content/components/code/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Code} from "@nextui-org/react"; - -export default function App() { - return ( -
    - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/code/usage.raw.jsx b/apps/docs/content/components/code/usage.raw.jsx new file mode 100644 index 000000000..d2adf43cb --- /dev/null +++ b/apps/docs/content/components/code/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Code} from "@nextui-org/react"; + +export default function App() { + return npm install @nextui-org/react; +} diff --git a/apps/docs/content/components/code/usage.ts b/apps/docs/content/components/code/usage.ts index b5a5a2895..1118304c3 100644 --- a/apps/docs/content/components/code/usage.ts +++ b/apps/docs/content/components/code/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Code} from "@nextui-org/react"; - -export default function App() { - return ( - npm install @nextui-org/react - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/controlled.raw.jsx b/apps/docs/content/components/date-input/controlled.raw.jsx new file mode 100644 index 000000000..b56cc09e3 --- /dev/null +++ b/apps/docs/content/components/date-input/controlled.raw.jsx @@ -0,0 +1,20 @@ +import {DateInput} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
    +
    + +

    + Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

    +
    +
    + ); +} diff --git a/apps/docs/content/components/date-input/controlled.raw.tsx b/apps/docs/content/components/date-input/controlled.raw.tsx new file mode 100644 index 000000000..bb4fae7fa --- /dev/null +++ b/apps/docs/content/components/date-input/controlled.raw.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import {DateInput} from "@nextui-org/react"; +import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
    +
    + +

    + Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

    +
    +
    + ); +} diff --git a/apps/docs/content/components/date-input/controlled.ts b/apps/docs/content/components/date-input/controlled.ts index cc8ce5a7b..1f1a36336 100644 --- a/apps/docs/content/components/date-input/controlled.ts +++ b/apps/docs/content/components/date-input/controlled.ts @@ -1,50 +1,15 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
    -
    - -

    - Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

    -
    -
    - ); -}`; - -const AppTs = `import {DateInput} from "@nextui-org/react"; -import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
    -
    - -

    - Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

    -
    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-input/description.raw.jsx b/apps/docs/content/components/date-input/description.raw.jsx new file mode 100644 index 000000000..8a43b6fa5 --- /dev/null +++ b/apps/docs/content/components/date-input/description.raw.jsx @@ -0,0 +1,14 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/description.ts b/apps/docs/content/components/date-input/description.ts index 344087e32..aeb6340b6 100644 --- a/apps/docs/content/components/date-input/description.ts +++ b/apps/docs/content/components/date-input/description.ts @@ -1,17 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/disabled.raw.jsx b/apps/docs/content/components/date-input/disabled.raw.jsx new file mode 100644 index 000000000..e674aeb93 --- /dev/null +++ b/apps/docs/content/components/date-input/disabled.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/disabled.ts b/apps/docs/content/components/date-input/disabled.ts index b61e92846..1a215cc91 100644 --- a/apps/docs/content/components/date-input/disabled.ts +++ b/apps/docs/content/components/date-input/disabled.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/error-message-function.raw.jsx b/apps/docs/content/components/date-input/error-message-function.raw.jsx new file mode 100644 index 000000000..085aaa325 --- /dev/null +++ b/apps/docs/content/components/date-input/error-message-function.raw.jsx @@ -0,0 +1,22 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + { + if (value.isInvalid) { + return "Please enter a valid date."; + } + }} + label={"Birth date"} + placeholderValue={new CalendarDate(1995, 11, 6)} + /> +
    + ); +} diff --git a/apps/docs/content/components/date-input/error-message-function.ts b/apps/docs/content/components/date-input/error-message-function.ts index 35371af42..1af000614 100644 --- a/apps/docs/content/components/date-input/error-message-function.ts +++ b/apps/docs/content/components/date-input/error-message-function.ts @@ -1,25 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - { - if (value.isInvalid) { - return "Please enter a valid date."; - } - }} - className="max-w-xs" - /> -
    - ); -}`; +import App from "./error-message-function.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/error-message.raw.jsx b/apps/docs/content/components/date-input/error-message.raw.jsx new file mode 100644 index 000000000..2f73e9d0d --- /dev/null +++ b/apps/docs/content/components/date-input/error-message.raw.jsx @@ -0,0 +1,18 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/error-message.ts b/apps/docs/content/components/date-input/error-message.ts index d9e58d695..fb8101b13 100644 --- a/apps/docs/content/components/date-input/error-message.ts +++ b/apps/docs/content/components/date-input/error-message.ts @@ -1,21 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/granularity.raw.jsx b/apps/docs/content/components/date-input/granularity.raw.jsx new file mode 100644 index 000000000..712b58eeb --- /dev/null +++ b/apps/docs/content/components/date-input/granularity.raw.jsx @@ -0,0 +1,19 @@ +import {DateInput} from "@nextui-org/react"; +import {now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + + +
    + ); +} diff --git a/apps/docs/content/components/date-input/granularity.raw.tsx b/apps/docs/content/components/date-input/granularity.raw.tsx new file mode 100644 index 000000000..d186cfdb9 --- /dev/null +++ b/apps/docs/content/components/date-input/granularity.raw.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import {DateInput} from "@nextui-org/react"; +import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + + +
    + ); +} diff --git a/apps/docs/content/components/date-input/granularity.ts b/apps/docs/content/components/date-input/granularity.ts index 936bcddff..6196832da 100644 --- a/apps/docs/content/components/date-input/granularity.ts +++ b/apps/docs/content/components/date-input/granularity.ts @@ -1,60 +1,15 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {now, parseAbsoluteToLocal} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
    - - - - -
    - ); -}`; - -const AppTs = `import {DateInput} from "@nextui-org/react"; -import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
    - - - - -
    - ); -}`; +import App from "./granularity.raw.jsx?raw"; +import AppTs from "./granularity.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-input/hide-timezone.raw.jsx b/apps/docs/content/components/date-input/hide-timezone.raw.jsx new file mode 100644 index 000000000..0629cf8eb --- /dev/null +++ b/apps/docs/content/components/date-input/hide-timezone.raw.jsx @@ -0,0 +1,14 @@ +import {DateInput} from "@nextui-org/react"; +import {parseZonedDateTime} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/hide-timezone.ts b/apps/docs/content/components/date-input/hide-timezone.ts index cde093363..225f73135 100644 --- a/apps/docs/content/components/date-input/hide-timezone.ts +++ b/apps/docs/content/components/date-input/hide-timezone.ts @@ -1,17 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseZonedDateTime} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./hide-timezone.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/hourly-cycle.raw.jsx b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx new file mode 100644 index 000000000..cd1be2e6a --- /dev/null +++ b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {parseZonedDateTime} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/hourly-cycle.ts b/apps/docs/content/components/date-input/hourly-cycle.ts index 0336f7ea1..21381611a 100644 --- a/apps/docs/content/components/date-input/hourly-cycle.ts +++ b/apps/docs/content/components/date-input/hourly-cycle.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseZonedDateTime} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./hourly-cycle.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/international-calendar.raw.jsx b/apps/docs/content/components/date-input/international-calendar.raw.jsx new file mode 100644 index 000000000..cc0ee6055 --- /dev/null +++ b/apps/docs/content/components/date-input/international-calendar.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/date-input/international-calendar.raw.tsx b/apps/docs/content/components/date-input/international-calendar.raw.tsx new file mode 100644 index 000000000..5f088ad83 --- /dev/null +++ b/apps/docs/content/components/date-input/international-calendar.raw.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import {DateInput} from "@nextui-org/react"; +import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/date-input/international-calendar.ts b/apps/docs/content/components/date-input/international-calendar.ts index 20f9064fe..a8707fd09 100644 --- a/apps/docs/content/components/date-input/international-calendar.ts +++ b/apps/docs/content/components/date-input/international-calendar.ts @@ -1,40 +1,15 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
    - - - -
    - ); -}`; - -const AppTs = `import {DateInput} from "@nextui-org/react"; -import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
    - - - -
    - ); -}`; +import App from "./international-calendar.raw.jsx?raw"; +import AppTs from "./international-calendar.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-input/label-placements.raw.jsx b/apps/docs/content/components/date-input/label-placements.raw.jsx new file mode 100644 index 000000000..112edbdeb --- /dev/null +++ b/apps/docs/content/components/date-input/label-placements.raw.jsx @@ -0,0 +1,20 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
    + {placements.map((placement) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/date-input/label-placements.ts b/apps/docs/content/components/date-input/label-placements.ts index df3d59c5f..cd2a65d35 100644 --- a/apps/docs/content/components/date-input/label-placements.ts +++ b/apps/docs/content/components/date-input/label-placements.ts @@ -1,26 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
    - {placements.map((placement) => ( - - ))} -
    - ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/min-and-max-date.raw.jsx b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx new file mode 100644 index 000000000..ba54d4dc9 --- /dev/null +++ b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx @@ -0,0 +1,25 @@ +import {DateInput} from "@nextui-org/react"; +import {getLocalTimeZone, today} from "@internationalized/date"; + +export default function App() { + return ( +
    +
    +

    Min date

    + +
    +
    +

    Max date

    + +
    +
    + ); +} diff --git a/apps/docs/content/components/date-input/min-and-max-date.ts b/apps/docs/content/components/date-input/min-and-max-date.ts index 5d59cb9f4..be9af0fc4 100644 --- a/apps/docs/content/components/date-input/min-and-max-date.ts +++ b/apps/docs/content/components/date-input/min-and-max-date.ts @@ -1,28 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {getLocalTimeZone, parseDate, today} from "@internationalized/date"; - -export default function App() { - return ( -
    -
    -

    Min date

    - -
    -
    -

    Max date

    - -
    -
    - ); -}`; +import App from "./min-and-max-date.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/readonly.raw.jsx b/apps/docs/content/components/date-input/readonly.raw.jsx new file mode 100644 index 000000000..46aedeed3 --- /dev/null +++ b/apps/docs/content/components/date-input/readonly.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/readonly.ts b/apps/docs/content/components/date-input/readonly.ts index ddd06f00b..fabd05ba3 100644 --- a/apps/docs/content/components/date-input/readonly.ts +++ b/apps/docs/content/components/date-input/readonly.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/required.raw.jsx b/apps/docs/content/components/date-input/required.raw.jsx new file mode 100644 index 000000000..909e91a0f --- /dev/null +++ b/apps/docs/content/components/date-input/required.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/required.ts b/apps/docs/content/components/date-input/required.ts index 7e064fec4..b50b781e6 100644 --- a/apps/docs/content/components/date-input/required.ts +++ b/apps/docs/content/components/date-input/required.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/start-end-content.raw.jsx b/apps/docs/content/components/date-input/start-end-content.raw.jsx new file mode 100644 index 000000000..ad70c51ed --- /dev/null +++ b/apps/docs/content/components/date-input/start-end-content.raw.jsx @@ -0,0 +1,55 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export const CalendarIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
    +
    + + } + /> + + } + label="Date Input" + labelPlacement="outside" + placeholderValue={new CalendarDate(1995, 11, 6)} + /> +
    +
    + ); +} diff --git a/apps/docs/content/components/date-input/start-end-content.ts b/apps/docs/content/components/date-input/start-end-content.ts index 182305c86..e99c7e599 100644 --- a/apps/docs/content/components/date-input/start-end-content.ts +++ b/apps/docs/content/components/date-input/start-end-content.ts @@ -1,61 +1,7 @@ -const CalendarIcon = `export const CalendarIcon = (props) => ( - -);`; - -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; -import {CalendarIcon} from './CalendarIcon'; - -export default function App() { - return ( -
    -
    - - } - /> - - } - /> -
    -
    - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CalendarIcon.jsx": CalendarIcon, }; export default { diff --git a/apps/docs/content/components/date-input/time-zones.raw.jsx b/apps/docs/content/components/date-input/time-zones.raw.jsx new file mode 100644 index 000000000..cd28b8ef1 --- /dev/null +++ b/apps/docs/content/components/date-input/time-zones.raw.jsx @@ -0,0 +1,19 @@ +import {DateInput} from "@nextui-org/react"; +import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-input/time-zones.ts b/apps/docs/content/components/date-input/time-zones.ts index 65b11c09c..803b4ec76 100644 --- a/apps/docs/content/components/date-input/time-zones.ts +++ b/apps/docs/content/components/date-input/time-zones.ts @@ -1,22 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./time-zones.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/usage.raw.jsx b/apps/docs/content/components/date-input/usage.raw.jsx new file mode 100644 index 000000000..bbc6bdd82 --- /dev/null +++ b/apps/docs/content/components/date-input/usage.raw.jsx @@ -0,0 +1,14 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-input/usage.ts b/apps/docs/content/components/date-input/usage.ts index eed099211..1118304c3 100644 --- a/apps/docs/content/components/date-input/usage.ts +++ b/apps/docs/content/components/date-input/usage.ts @@ -1,13 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/variants.raw.jsx b/apps/docs/content/components/date-input/variants.raw.jsx new file mode 100644 index 000000000..954926171 --- /dev/null +++ b/apps/docs/content/components/date-input/variants.raw.jsx @@ -0,0 +1,20 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/date-input/variants.ts b/apps/docs/content/components/date-input/variants.ts index 5d37e4d19..ddea95fb2 100644 --- a/apps/docs/content/components/date-input/variants.ts +++ b/apps/docs/content/components/date-input/variants.ts @@ -1,19 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
    - {variants.map((variant) => ( -
    - -
    - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/controlled.raw.jsx b/apps/docs/content/components/date-picker/controlled.raw.jsx new file mode 100644 index 000000000..f831b0792 --- /dev/null +++ b/apps/docs/content/components/date-picker/controlled.raw.jsx @@ -0,0 +1,30 @@ +import {DatePicker} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
    +
    + +

    + Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

    +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/controlled.raw.tsx b/apps/docs/content/components/date-picker/controlled.raw.tsx new file mode 100644 index 000000000..389bfa532 --- /dev/null +++ b/apps/docs/content/components/date-picker/controlled.raw.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import {DatePicker} from "@nextui-org/react"; +import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
    +
    + +

    + Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

    +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/controlled.ts b/apps/docs/content/components/date-picker/controlled.ts index fdbcded26..1f1a36336 100644 --- a/apps/docs/content/components/date-picker/controlled.ts +++ b/apps/docs/content/components/date-picker/controlled.ts @@ -1,52 +1,15 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
    -
    - -

    - Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

    -
    - -
    - ); -}`; - -const AppTs = `import {DatePicker} from "@nextui-org/react"; -import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
    -
    - -

    - Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

    -
    - -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-picker/description.raw.jsx b/apps/docs/content/components/date-picker/description.raw.jsx new file mode 100644 index 000000000..ee4547c97 --- /dev/null +++ b/apps/docs/content/components/date-picker/description.raw.jsx @@ -0,0 +1,13 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/description.ts b/apps/docs/content/components/date-picker/description.ts index 83fc27d07..aeb6340b6 100644 --- a/apps/docs/content/components/date-picker/description.ts +++ b/apps/docs/content/components/date-picker/description.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/disabled.raw.jsx b/apps/docs/content/components/date-picker/disabled.raw.jsx new file mode 100644 index 000000000..96f50a7a6 --- /dev/null +++ b/apps/docs/content/components/date-picker/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/disabled.ts b/apps/docs/content/components/date-picker/disabled.ts index d6c59845d..1a215cc91 100644 --- a/apps/docs/content/components/date-picker/disabled.ts +++ b/apps/docs/content/components/date-picker/disabled.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-picker/error-message-function.raw.jsx new file mode 100644 index 000000000..68272a709 --- /dev/null +++ b/apps/docs/content/components/date-picker/error-message-function.raw.jsx @@ -0,0 +1,18 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + { + if (value.isInvalid) { + return "Please enter a valid date."; + } + }} + label="Birth date" + /> +
    + ); +} diff --git a/apps/docs/content/components/date-picker/error-message-function.ts b/apps/docs/content/components/date-picker/error-message-function.ts index 2b473c9f5..1af000614 100644 --- a/apps/docs/content/components/date-picker/error-message-function.ts +++ b/apps/docs/content/components/date-picker/error-message-function.ts @@ -1,21 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - { - if (value.isInvalid) { - return "Please enter a valid date."; - } - }} - /> -
    - ); -}`; +import App from "./error-message-function.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/error-message.raw.jsx b/apps/docs/content/components/date-picker/error-message.raw.jsx new file mode 100644 index 000000000..b367b0374 --- /dev/null +++ b/apps/docs/content/components/date-picker/error-message.raw.jsx @@ -0,0 +1,14 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/error-message.ts b/apps/docs/content/components/date-picker/error-message.ts index d1c85629a..fb8101b13 100644 --- a/apps/docs/content/components/date-picker/error-message.ts +++ b/apps/docs/content/components/date-picker/error-message.ts @@ -1,17 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/granularity.raw.jsx b/apps/docs/content/components/date-picker/granularity.raw.jsx new file mode 100644 index 000000000..b1edba5b9 --- /dev/null +++ b/apps/docs/content/components/date-picker/granularity.raw.jsx @@ -0,0 +1,32 @@ +import {DatePicker} from "@nextui-org/react"; +import {now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/granularity.raw.tsx b/apps/docs/content/components/date-picker/granularity.raw.tsx new file mode 100644 index 000000000..47db9bc44 --- /dev/null +++ b/apps/docs/content/components/date-picker/granularity.raw.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import {DatePicker} from "@nextui-org/react"; +import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-picker/international-calendar.raw.jsx new file mode 100644 index 000000000..02f132c4f --- /dev/null +++ b/apps/docs/content/components/date-picker/international-calendar.raw.jsx @@ -0,0 +1,22 @@ +import {DatePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-picker/international-calendar.raw.tsx new file mode 100644 index 000000000..8b9e570dd --- /dev/null +++ b/apps/docs/content/components/date-picker/international-calendar.raw.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import {DatePicker} from "@nextui-org/react"; +import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/international-calendar.ts b/apps/docs/content/components/date-picker/international-calendar.ts index ba86ec20f..a8707fd09 100644 --- a/apps/docs/content/components/date-picker/international-calendar.ts +++ b/apps/docs/content/components/date-picker/international-calendar.ts @@ -1,54 +1,15 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
    - - - -
    - ); -}`; - -const AppTs = `import {DatePicker} from "@nextui-org/react"; -import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
    - - - -
    - ); -}`; +import App from "./international-calendar.raw.jsx?raw"; +import AppTs from "./international-calendar.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-picker/label-placements.raw.jsx b/apps/docs/content/components/date-picker/label-placements.raw.jsx new file mode 100644 index 000000000..551c5d6a0 --- /dev/null +++ b/apps/docs/content/components/date-picker/label-placements.raw.jsx @@ -0,0 +1,23 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
    +
    +
    + {placements.map((placement) => ( + + ))} +
    +
    +
    + ); +} diff --git a/apps/docs/content/components/date-picker/label-placements.ts b/apps/docs/content/components/date-picker/label-placements.ts index abd21541d..cd2a65d35 100644 --- a/apps/docs/content/components/date-picker/label-placements.ts +++ b/apps/docs/content/components/date-picker/label-placements.ts @@ -1,29 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
    -
    -
    - {placements.map((placement) => ( - - ))} -
    -
    -
    - ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx new file mode 100644 index 000000000..06f92bb8f --- /dev/null +++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx @@ -0,0 +1,25 @@ +import {DatePicker} from "@nextui-org/react"; +import {getLocalTimeZone, today} from "@internationalized/date"; + +export default function App() { + return ( +
    +
    +

    Min date

    + +
    +
    +

    Max date

    + +
    +
    + ); +} diff --git a/apps/docs/content/components/date-picker/min-and-max-date.ts b/apps/docs/content/components/date-picker/min-and-max-date.ts index bdd999213..be9af0fc4 100644 --- a/apps/docs/content/components/date-picker/min-and-max-date.ts +++ b/apps/docs/content/components/date-picker/min-and-max-date.ts @@ -1,28 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {getLocalTimeZone, today} from "@internationalized/date"; - -export default function App() { - return ( -
    -
    -

    Min date

    - -
    -
    -

    Max date

    - -
    -
    - ); -}`; +import App from "./min-and-max-date.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-picker/page-behavior.raw.jsx new file mode 100644 index 000000000..5c5833cd1 --- /dev/null +++ b/apps/docs/content/components/date-picker/page-behavior.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/page-behavior.ts b/apps/docs/content/components/date-picker/page-behavior.ts index dda732673..70c2ebfd2 100644 --- a/apps/docs/content/components/date-picker/page-behavior.ts +++ b/apps/docs/content/components/date-picker/page-behavior.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./page-behavior.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/preset.raw.jsx b/apps/docs/content/components/date-picker/preset.raw.jsx new file mode 100644 index 000000000..d93f2e6a3 --- /dev/null +++ b/apps/docs/content/components/date-picker/preset.raw.jsx @@ -0,0 +1,92 @@ +import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; +import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date"; +import {useLocale, useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + + const [value, setValue] = React.useState(defaultDate); + + let {locale} = useLocale(); + let formatter = useDateFormatter({dateStyle: "full"}); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + CalendarTopContent={ + + + + + + } + calendarProps={{ + focusedValue: value, + onFocusChange: setValue, + nextButtonProps: { + variant: "bordered", + }, + prevButtonProps: { + variant: "bordered", + }, + }} + label="Event date" + value={value} + onChange={setValue} + /> +

    + Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

    +
    + ); +} diff --git a/apps/docs/content/components/date-picker/preset.raw.tsx b/apps/docs/content/components/date-picker/preset.raw.tsx new file mode 100644 index 000000000..de9dd853d --- /dev/null +++ b/apps/docs/content/components/date-picker/preset.raw.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; +import { + DateValue, + startOfWeek, + startOfMonth, + getLocalTimeZone, + today, +} from "@internationalized/date"; +import {useLocale, useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + + const [value, setValue] = React.useState(defaultDate); + + let {locale} = useLocale(); + let formatter = useDateFormatter({dateStyle: "full"}); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + CalendarTopContent={ + + + + + + } + calendarProps={{ + focusedValue: value, + onFocusChange: setValue, + nextButtonProps: { + variant: "bordered", + }, + prevButtonProps: { + variant: "bordered", + }, + }} + label="Event date" + value={value} + onChange={setValue} + /> +

    + Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

    +
    + ); +} diff --git a/apps/docs/content/components/date-picker/preset.ts b/apps/docs/content/components/date-picker/preset.ts index 884ffbd06..ae3ac37b4 100644 --- a/apps/docs/content/components/date-picker/preset.ts +++ b/apps/docs/content/components/date-picker/preset.ts @@ -1,194 +1,15 @@ -const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; -import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date"; -import {useLocale, useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - - const [value, setValue] = React.useState(defaultDate); - - let {locale} = useLocale(); - let formatter = useDateFormatter({dateStyle: "full"}); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - CalendarTopContent={ - - - - - - } - calendarProps={{ - focusedValue: value, - onFocusChange: setValue, - nextButtonProps: { - variant: "bordered", - }, - prevButtonProps: { - variant: "bordered", - }, - }} - value={value} - onChange={setValue} - label="Event date" - /> -

    - Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

    -
    - ); -}`; - -const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; -import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date"; -import {useLocale, useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - - const [value, setValue] = React.useState(defaultDate); - - let {locale} = useLocale(); - let formatter = useDateFormatter({dateStyle: "full"}); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - CalendarTopContent={ - - - - - - } - calendarProps={{ - focusedValue: value, - onFocusChange: setValue, - nextButtonProps: { - variant: "bordered", - }, - prevButtonProps: { - variant: "bordered", - }, - }} - value={value} - onChange={setValue} - label="Event date" - /> -

    - Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

    -
    - ); -}`; +import App from "./preset.raw.jsx?raw"; +import AppTs from "./preset.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-picker/readonly.raw.jsx b/apps/docs/content/components/date-picker/readonly.raw.jsx new file mode 100644 index 000000000..26698bb91 --- /dev/null +++ b/apps/docs/content/components/date-picker/readonly.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/readonly.ts b/apps/docs/content/components/date-picker/readonly.ts index 35ac2d880..fabd05ba3 100644 --- a/apps/docs/content/components/date-picker/readonly.ts +++ b/apps/docs/content/components/date-picker/readonly.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/required.raw.jsx b/apps/docs/content/components/date-picker/required.raw.jsx new file mode 100644 index 000000000..745bc44be --- /dev/null +++ b/apps/docs/content/components/date-picker/required.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/required.ts b/apps/docs/content/components/date-picker/required.ts index c5746bef4..b50b781e6 100644 --- a/apps/docs/content/components/date-picker/required.ts +++ b/apps/docs/content/components/date-picker/required.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx new file mode 100644 index 000000000..20372e750 --- /dev/null +++ b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx @@ -0,0 +1,10 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/selector-button-placement.ts b/apps/docs/content/components/date-picker/selector-button-placement.ts index 923d92384..2d69e80fe 100644 --- a/apps/docs/content/components/date-picker/selector-button-placement.ts +++ b/apps/docs/content/components/date-picker/selector-button-placement.ts @@ -1,19 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./selector-button-placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-picker/selector-icon.raw.jsx new file mode 100644 index 000000000..87c2819f9 --- /dev/null +++ b/apps/docs/content/components/date-picker/selector-icon.raw.jsx @@ -0,0 +1,27 @@ +import {DatePicker} from "@nextui-org/react"; + +export const SelectorIcon = () => { + return ( + + + + + + + + ); +}; + +export default function App() { + return ( +
    + } /> +
    + ); +} diff --git a/apps/docs/content/components/date-picker/selector-icon.ts b/apps/docs/content/components/date-picker/selector-icon.ts index b7fd8509e..9997d508d 100644 --- a/apps/docs/content/components/date-picker/selector-icon.ts +++ b/apps/docs/content/components/date-picker/selector-icon.ts @@ -1,36 +1,7 @@ -const SelectorIcon = `export const SelectorIcon = () => ( - - - - - - - -);`; - -const App = `import {DatePicker} from "@nextui-org/react"; -import {SelectorIcon} from './SelectorIcon'; - -export default function App() { - return ( -
    - } - /> -
    - ); -}`; +import App from "./selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/date-picker/time-zones.raw.jsx b/apps/docs/content/components/date-picker/time-zones.raw.jsx new file mode 100644 index 000000000..f2986331d --- /dev/null +++ b/apps/docs/content/components/date-picker/time-zones.raw.jsx @@ -0,0 +1,21 @@ +import {DatePicker} from "@nextui-org/react"; +import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/time-zones.ts b/apps/docs/content/components/date-picker/time-zones.ts index 85c1d3c55..803b4ec76 100644 --- a/apps/docs/content/components/date-picker/time-zones.ts +++ b/apps/docs/content/components/date-picker/time-zones.ts @@ -1,24 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./time-zones.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx new file mode 100644 index 000000000..fc8e72798 --- /dev/null +++ b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx @@ -0,0 +1,30 @@ +import {DatePicker} from "@nextui-org/react"; +import {today, isWeekend, getLocalTimeZone} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + let {locale} = useLocale(); + + let isDateUnavailable = (date) => + isWeekend(date, locale) || + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ); + + return ( + + ); +} diff --git a/apps/docs/content/components/date-picker/unavailable-dates.ts b/apps/docs/content/components/date-picker/unavailable-dates.ts index 93e060677..b4e1f4df1 100644 --- a/apps/docs/content/components/date-picker/unavailable-dates.ts +++ b/apps/docs/content/components/date-picker/unavailable-dates.ts @@ -1,33 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {today, isWeekend, getLocalTimeZone} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - let {locale} = useLocale(); - - let isDateUnavailable = (date) => - isWeekend(date, locale) || - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ); - - return ( - - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/usage.raw.jsx b/apps/docs/content/components/date-picker/usage.raw.jsx new file mode 100644 index 000000000..d007f1291 --- /dev/null +++ b/apps/docs/content/components/date-picker/usage.raw.jsx @@ -0,0 +1,5 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/date-picker/usage.ts b/apps/docs/content/components/date-picker/usage.ts index 2f3a5d5ca..1118304c3 100644 --- a/apps/docs/content/components/date-picker/usage.ts +++ b/apps/docs/content/components/date-picker/usage.ts @@ -1,10 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/variants.raw.jsx b/apps/docs/content/components/date-picker/variants.raw.jsx new file mode 100644 index 000000000..8111333b5 --- /dev/null +++ b/apps/docs/content/components/date-picker/variants.raw.jsx @@ -0,0 +1,15 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/date-picker/variants.ts b/apps/docs/content/components/date-picker/variants.ts index b31ec23ae..ddea95fb2 100644 --- a/apps/docs/content/components/date-picker/variants.ts +++ b/apps/docs/content/components/date-picker/variants.ts @@ -1,18 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
    - {variants.map((variant) => ( -
    - -
    - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/visible-month.raw.jsx b/apps/docs/content/components/date-picker/visible-month.raw.jsx new file mode 100644 index 000000000..0143d03c4 --- /dev/null +++ b/apps/docs/content/components/date-picker/visible-month.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/visible-month.ts b/apps/docs/content/components/date-picker/visible-month.ts index 2e9f01b03..7c3a2abe6 100644 --- a/apps/docs/content/components/date-picker/visible-month.ts +++ b/apps/docs/content/components/date-picker/visible-month.ts @@ -1,15 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./visible-month.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx new file mode 100644 index 000000000..5047a454e --- /dev/null +++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts index eeb8ae32a..5e5431496 100644 --- a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts +++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./with-month-and-year-pickers.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-picker/with-time-field.raw.jsx new file mode 100644 index 000000000..b6784d7ca --- /dev/null +++ b/apps/docs/content/components/date-picker/with-time-field.raw.jsx @@ -0,0 +1,16 @@ +import {DatePicker} from "@nextui-org/react"; +import {now, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-picker/with-time-field.ts b/apps/docs/content/components/date-picker/with-time-field.ts index 54d597e37..8df135a00 100644 --- a/apps/docs/content/components/date-picker/with-time-field.ts +++ b/apps/docs/content/components/date-picker/with-time-field.ts @@ -1,19 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {now, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./with-time-field.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.jsx b/apps/docs/content/components/date-range-picker/controlled.raw.jsx new file mode 100644 index 000000000..fd7b3063f --- /dev/null +++ b/apps/docs/content/components/date-range-picker/controlled.raw.jsx @@ -0,0 +1,36 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState({ + start: parseDate("2024-04-01"), + end: parseDate("2024-04-08"), + }); + + let formatter = useDateFormatter({dateStyle: "long"}); + + return ( +
    +
    + +

    + Selected date:{" "} + {value + ? formatter.formatRange( + value.start.toDate(getLocalTimeZone()), + value.end.toDate(getLocalTimeZone()), + ) + : "--"} +

    +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.tsx b/apps/docs/content/components/date-range-picker/controlled.raw.tsx new file mode 100644 index 000000000..868b5440f --- /dev/null +++ b/apps/docs/content/components/date-range-picker/controlled.raw.tsx @@ -0,0 +1,40 @@ +import type {RangeValue} from "@react-types/shared"; +import type {DateValue} from "@react-types/datepicker"; + +import React from "react"; +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState>({ + start: parseDate("2024-04-01"), + end: parseDate("2024-04-08"), + }); + + let formatter = useDateFormatter({dateStyle: "long"}); + + return ( +
    +
    + +

    + Selected date:{" "} + {value + ? formatter.formatRange( + value.start.toDate(getLocalTimeZone()), + value.end.toDate(getLocalTimeZone()), + ) + : "--"} +

    +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/controlled.ts b/apps/docs/content/components/date-range-picker/controlled.ts index 12f5e4d8a..1f1a36336 100644 --- a/apps/docs/content/components/date-range-picker/controlled.ts +++ b/apps/docs/content/components/date-range-picker/controlled.ts @@ -1,86 +1,5 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState({ - start: parseDate("2024-04-01"), - end: parseDate("2024-04-08"), - }); - - let formatter = useDateFormatter({dateStyle: "long"}); - - return ( -
    -
    - -

    - Selected date:{" "} - {value - ? formatter.formatRange( - value.start.toDate(getLocalTimeZone()), - value.end.toDate(getLocalTimeZone()), - ) - : "--"} -

    -
    - -
    - ); -}`; - -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; -import {RangeValue} from "@react-types/shared"; -import {DateValue} from "@react-types/datepicker"; - -export default function App() { - const [value, setValue] = React.useState>({ - start: parseDate("2024-04-01"), - end: parseDate("2024-04-08"), - }); - - let formatter = useDateFormatter({dateStyle: "long"}); - - return ( -
    -
    - -

    - Selected date:{" "} - {value - ? formatter.formatRange( - value.start.toDate(getLocalTimeZone()), - value.end.toDate(getLocalTimeZone()), - ) - : "--"} -

    -
    - -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx new file mode 100644 index 000000000..17a676327 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx @@ -0,0 +1,33 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/custom-styles.ts b/apps/docs/content/components/date-range-picker/custom-styles.ts index 6c11daf88..da3ea9093 100644 --- a/apps/docs/content/components/date-range-picker/custom-styles.ts +++ b/apps/docs/content/components/date-range-picker/custom-styles.ts @@ -1,36 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/description.raw.jsx b/apps/docs/content/components/date-range-picker/description.raw.jsx new file mode 100644 index 000000000..030081237 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/description.raw.jsx @@ -0,0 +1,11 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/description.ts b/apps/docs/content/components/date-range-picker/description.ts index a81889d1b..aeb6340b6 100644 --- a/apps/docs/content/components/date-range-picker/description.ts +++ b/apps/docs/content/components/date-range-picker/description.ts @@ -1,14 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/disabled.raw.jsx b/apps/docs/content/components/date-range-picker/disabled.raw.jsx new file mode 100644 index 000000000..c1ac55a52 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/disabled.raw.jsx @@ -0,0 +1,16 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/disabled.ts b/apps/docs/content/components/date-range-picker/disabled.ts index ea2ff5116..1a215cc91 100644 --- a/apps/docs/content/components/date-range-picker/disabled.ts +++ b/apps/docs/content/components/date-range-picker/disabled.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx new file mode 100644 index 000000000..db1263f55 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx @@ -0,0 +1,22 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + { + if (value.isInvalid) { + return "Please enter your stay duration"; + } + }} + label="Stay duration" + variant="bordered" + /> + ); +} diff --git a/apps/docs/content/components/date-range-picker/error-message-function.ts b/apps/docs/content/components/date-range-picker/error-message-function.ts index 9e8cb16ea..1af000614 100644 --- a/apps/docs/content/components/date-range-picker/error-message-function.ts +++ b/apps/docs/content/components/date-range-picker/error-message-function.ts @@ -1,25 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - { - if (value.isInvalid) { - return "Please enter your stay duration"; - } - }} - defaultValue={{ - start: parseDate("2024-04-01"), - end: parseDate("2024-04-08"), - }} - className="max-w-xs" - /> - ); -}`; +import App from "./error-message-function.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/error-message.raw.jsx b/apps/docs/content/components/date-range-picker/error-message.raw.jsx new file mode 100644 index 000000000..fe6d92e39 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/error-message.raw.jsx @@ -0,0 +1,18 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/error-message.ts b/apps/docs/content/components/date-range-picker/error-message.ts index ed0abd8ab..fb8101b13 100644 --- a/apps/docs/content/components/date-range-picker/error-message.ts +++ b/apps/docs/content/components/date-range-picker/error-message.ts @@ -1,21 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.jsx b/apps/docs/content/components/date-range-picker/granularity.raw.jsx new file mode 100644 index 000000000..46d82da6a --- /dev/null +++ b/apps/docs/content/components/date-range-picker/granularity.raw.jsx @@ -0,0 +1,28 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState({ + start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), + }); + + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.tsx b/apps/docs/content/components/date-range-picker/granularity.raw.tsx new file mode 100644 index 000000000..e1ec7fb91 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/granularity.raw.tsx @@ -0,0 +1,32 @@ +import type {RangeValue} from "@react-types/shared"; +import type {DateValue} from "@react-types/datepicker"; + +import React from "react"; +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState>({ + start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), + }); + + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/granularity.ts b/apps/docs/content/components/date-range-picker/granularity.ts index 10094d839..6196832da 100644 --- a/apps/docs/content/components/date-range-picker/granularity.ts +++ b/apps/docs/content/components/date-range-picker/granularity.ts @@ -1,67 +1,15 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - let [date, setDate] = React.useState({ - start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), - }); - - return ( -
    - - -
    - ); -}`; - -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; -import {RangeValue} from "@react-types/shared"; - -export default function App() { - let [date, setDate] = React.useState>({ - start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), - }); - - return ( -
    - - -
    - ); -}`; +import App from "./granularity.raw.jsx?raw"; +import AppTs from "./granularity.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx new file mode 100644 index 000000000..75e82363c --- /dev/null +++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx @@ -0,0 +1,18 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState({ + start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), + }); + + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx new file mode 100644 index 000000000..c6eca2392 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx @@ -0,0 +1,22 @@ +import type {RangeValue} from "@react-types/shared"; +import type {DateValue} from "@react-types/datepicker"; + +import React from "react"; +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState>({ + start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), + }); + + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/international-calendar.ts b/apps/docs/content/components/date-range-picker/international-calendar.ts index e28d31e8e..a8707fd09 100644 --- a/apps/docs/content/components/date-range-picker/international-calendar.ts +++ b/apps/docs/content/components/date-range-picker/international-calendar.ts @@ -1,47 +1,15 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState({ - start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), - }); - - return ( -
    - - - -
    - ); -}`; - -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; -import {RangeValue} from "@react-types/shared"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState>({ - start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), - }); - - return ( -
    - - - -
    - ); -}`; +import App from "./international-calendar.raw.jsx?raw"; +import AppTs from "./international-calendar.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-range-picker/label-placements.raw.jsx b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx new file mode 100644 index 000000000..1f5b70d37 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx @@ -0,0 +1,20 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
    +
    + {placements.map((placement) => ( + + ))} +
    +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/label-placements.ts b/apps/docs/content/components/date-range-picker/label-placements.ts index ae0d8f4c5..cd2a65d35 100644 --- a/apps/docs/content/components/date-range-picker/label-placements.ts +++ b/apps/docs/content/components/date-range-picker/label-placements.ts @@ -1,27 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
    -
    - {placements.map((placement) => ( - - ))} -
    -
    - ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx new file mode 100644 index 000000000..b3557e162 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx @@ -0,0 +1,31 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {getLocalTimeZone, parseDate, today} from "@internationalized/date"; + +export default function App() { + return ( +
    +
    +

    Min date

    + +
    +
    +

    Max date

    + +
    +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.ts b/apps/docs/content/components/date-range-picker/min-and-max-date.ts index a1db8afe8..be9af0fc4 100644 --- a/apps/docs/content/components/date-range-picker/min-and-max-date.ts +++ b/apps/docs/content/components/date-range-picker/min-and-max-date.ts @@ -1,34 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {getLocalTimeZone, parseDate, today} from "@internationalized/date"; - -export default function App() { - return ( -
    -
    -

    Min date

    - -
    -
    -

    Max date

    - -
    -
    - ); -}`; +import App from "./min-and-max-date.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx new file mode 100644 index 000000000..ea418e781 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx @@ -0,0 +1,17 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {isWeekend, today, getLocalTimeZone} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let {locale} = useLocale(); + + return ( + isWeekend(date, locale)} + label="Time off request" + minValue={today(getLocalTimeZone())} + visibleMonths={2} + /> + ); +} diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.ts b/apps/docs/content/components/date-range-picker/non-contiguous.ts index a85e7f570..1d0c412e6 100644 --- a/apps/docs/content/components/date-range-picker/non-contiguous.ts +++ b/apps/docs/content/components/date-range-picker/non-contiguous.ts @@ -1,20 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {isWeekend, today, getLocalTimeZone} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let {locale} = useLocale(); - - return ( - isWeekend(date, locale)} - label="Time off request" - minValue={today(getLocalTimeZone())} - visibleMonths={2} - /> - ); -}`; +import App from "./non-contiguous.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx new file mode 100644 index 000000000..a7493015c --- /dev/null +++ b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx @@ -0,0 +1,9 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/page-behavior.ts b/apps/docs/content/components/date-range-picker/page-behavior.ts index 49d92881d..70c2ebfd2 100644 --- a/apps/docs/content/components/date-range-picker/page-behavior.ts +++ b/apps/docs/content/components/date-range-picker/page-behavior.ts @@ -1,16 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./page-behavior.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/presets.raw.jsx b/apps/docs/content/components/date-range-picker/presets.raw.jsx new file mode 100644 index 000000000..6a14eaf42 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/presets.raw.jsx @@ -0,0 +1,122 @@ +import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import { + today, + startOfWeek, + startOfMonth, + endOfWeek, + endOfMonth, + getLocalTimeZone, +} from "@internationalized/date"; +import {useLocale, useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = { + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({days: 7}), + }; + let [value, setValue] = React.useState(defaultDate); + + let {locale} = useLocale(); + let formatter = useDateFormatter({dateStyle: "full"}); + let now = today(getLocalTimeZone()); + let nextWeek = { + start: startOfWeek(now.add({weeks: 1}), locale), + end: endOfWeek(now.add({weeks: 1}), locale), + }; + let nextMonth = { + start: startOfMonth(now.add({months: 1})), + end: endOfMonth(now.add({months: 1})), + }; + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + CalendarTopContent={ + + + + + + } + calendarProps={{ + focusedValue: value.start, + onFocusChange: (val) => setValue({...value, start: val}), + nextButtonProps: { + variant: "bordered", + }, + prevButtonProps: { + variant: "bordered", + }, + }} + label="Event date" + value={value} + onChange={setValue} + /> +

    + Selected date:{" "} + {value + ? formatter.formatRange( + value.start.toDate(getLocalTimeZone()), + value.end.toDate(getLocalTimeZone()), + ) + : "--"} +

    +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts index 6bf954195..a73828a67 100644 --- a/apps/docs/content/components/date-range-picker/presets.ts +++ b/apps/docs/content/components/date-range-picker/presets.ts @@ -1,241 +1,7 @@ -const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date"; -import {useLocale, useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = { - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({days: 7}), - }; - let [value, setValue] = React.useState(defaultDate); - - let {locale} = useLocale(); - let formatter = useDateFormatter({dateStyle: "full"}); - let now = today(getLocalTimeZone()); - let nextWeek = { - start: startOfWeek(now.add({weeks: 1}), locale), - end: endOfWeek(now.add({weeks: 1}), locale), - }; - let nextMonth = { - start: startOfMonth(now.add({months: 1})), - end: endOfMonth(now.add({months: 1})), - }; - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - CalendarTopContent={ - - - - - - } - calendarProps={{ - focusedValue: value?.start, - onFocusChange: (val) => setValue({...value, start: val}), - nextButtonProps: { - variant: "bordered", - }, - prevButtonProps: { - variant: "bordered", - }, - }} - value={value} - onChange={setValue} - label="Event date" - /> -

    - Selected date:{" "} - {value - ? formatter.formatRange( - value.start.toDate(getLocalTimeZone()), - value.end.toDate(getLocalTimeZone()), - ) - : "--"} -

    -
    - ); -}`; - -// const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -// import {now, today, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date"; -// import {useLocale} from "@react-aria/i18n"; -// import {RangeValue} from "@react-types/shared"; - -// export default function App() { -// let defaultDate = { -// start: today(getLocalTimeZone()), -// end: today(getLocalTimeZone()).add({days: 7}), -// }; - -// const [value, setValue] = React.useState>(defaultDate); - -// let {locale} = useLocale(); -// let formatter = useDateFormatter({dateStyle: "full"}); - -// let now = today(getLocalTimeZone()); -// let nextWeek = { -// start: startOfWeek(now.add({weeks: 1}), locale), -// end: endOfWeek(now.add({weeks: 1}), locale), -// }; -// let nextMonth = { -// start: startOfMonth(now.add({months: 1})), -// end: endOfMonth(now.add({months: 1})), -// }; - -// const CustomRadio = (props) => { -// const {children, ...otherProps} = props; - -// return ( -// -// {children} -// -// ); -// }; - -// return ( -//
    -// -// Exact dates -// 1 day -// 2 days -// 3 days -// 7 days -// 14 days -// -// } -// CalendarTopContent={ -// -// -// -// -// -// } -// calendarProps={{ -// focusedValue: value.start, -// onFocusChange: (val) => setValue({...value, start: val}), -// nextButtonProps: { -// variant: "bordered", -// }, -// prevButtonProps: { -// variant: "bordered", -// }, -// }} -// value={value} -// onChange={setValue} -// label="Event date" -// /> -//

    -// Selected date:{" "} -// {value -// ? formatter.formatRange( -// value.start.toDate(getLocalTimeZone()), -// value.end.toDate(getLocalTimeZone()), -// ) -// : "--"} -//

    -//
    -// ); -// }`; +import App from "./presets.raw.jsx?raw"; const react = { "/App.jsx": App, - // "/App.tsx": AppTs, }; export default { diff --git a/apps/docs/content/components/date-range-picker/readonly.raw.jsx b/apps/docs/content/components/date-range-picker/readonly.raw.jsx new file mode 100644 index 000000000..11e281d0a --- /dev/null +++ b/apps/docs/content/components/date-range-picker/readonly.raw.jsx @@ -0,0 +1,16 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/readonly.ts b/apps/docs/content/components/date-range-picker/readonly.ts index 4ac98ed8b..fabd05ba3 100644 --- a/apps/docs/content/components/date-range-picker/readonly.ts +++ b/apps/docs/content/components/date-range-picker/readonly.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/required.raw.jsx b/apps/docs/content/components/date-range-picker/required.raw.jsx new file mode 100644 index 000000000..8076e8e76 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/required.raw.jsx @@ -0,0 +1,16 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/required.ts b/apps/docs/content/components/date-range-picker/required.ts index c3c9e0bbd..b50b781e6 100644 --- a/apps/docs/content/components/date-range-picker/required.ts +++ b/apps/docs/content/components/date-range-picker/required.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx new file mode 100644 index 000000000..f8f253caf --- /dev/null +++ b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx @@ -0,0 +1,10 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.ts b/apps/docs/content/components/date-range-picker/selector-button-placement.ts index f36752737..2d69e80fe 100644 --- a/apps/docs/content/components/date-range-picker/selector-button-placement.ts +++ b/apps/docs/content/components/date-range-picker/selector-button-placement.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./selector-button-placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx new file mode 100644 index 000000000..0df488b23 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx @@ -0,0 +1,27 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export const SelectorIcon = (props) => { + return ( + + + + + + + + ); +}; + +export default function App() { + return ( +
    + } /> +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/selector-icon.ts b/apps/docs/content/components/date-range-picker/selector-icon.ts index 10e4eeb89..9997d508d 100644 --- a/apps/docs/content/components/date-range-picker/selector-icon.ts +++ b/apps/docs/content/components/date-range-picker/selector-icon.ts @@ -1,35 +1,7 @@ -const SelectorIcon = `export const SelectorIcon = (props) => ( - - - - - - - -);`; - -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {SelectorIcon} from './SelectorIcon'; -export default function App() { - return ( -
    - } - /> -
    - ); -}`; +import App from "./selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/date-range-picker/time-zones.raw.jsx b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx new file mode 100644 index 000000000..b353f8259 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx @@ -0,0 +1,25 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/time-zones.ts b/apps/docs/content/components/date-range-picker/time-zones.ts index ac08becc5..803b4ec76 100644 --- a/apps/docs/content/components/date-range-picker/time-zones.ts +++ b/apps/docs/content/components/date-range-picker/time-zones.ts @@ -1,28 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./time-zones.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx new file mode 100644 index 000000000..3e2324f44 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx @@ -0,0 +1,33 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + return ( + + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ) + } + label="Stay duration" + minValue={today(getLocalTimeZone())} + validate={(value) => + disabledRanges.some( + (interval) => + value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0, + ) + ? "Selected date range may not include unavailable dates." + : null + } + validationBehavior="native" + /> + ); +} diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.ts b/apps/docs/content/components/date-range-picker/unavailable-dates.ts index c300b5fc5..b4e1f4df1 100644 --- a/apps/docs/content/components/date-range-picker/unavailable-dates.ts +++ b/apps/docs/content/components/date-range-picker/unavailable-dates.ts @@ -1,36 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - return ( - - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ) - } - minValue={today(getLocalTimeZone())} - validate={(value) => - disabledRanges.some( - (interval) => - value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0, - ) - ? "Selected date range may not include unavailable dates." - : null - } - validationBehavior="native" - /> - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/usage.raw.jsx b/apps/docs/content/components/date-range-picker/usage.raw.jsx new file mode 100644 index 000000000..0eacc56b4 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/usage.raw.jsx @@ -0,0 +1,5 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/date-range-picker/usage.ts b/apps/docs/content/components/date-range-picker/usage.ts index b83666a5c..1118304c3 100644 --- a/apps/docs/content/components/date-range-picker/usage.ts +++ b/apps/docs/content/components/date-range-picker/usage.ts @@ -1,13 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/variants.raw.jsx b/apps/docs/content/components/date-range-picker/variants.raw.jsx new file mode 100644 index 000000000..5f20d0946 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/variants.raw.jsx @@ -0,0 +1,15 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/variants.ts b/apps/docs/content/components/date-range-picker/variants.ts index 668f9c83f..ddea95fb2 100644 --- a/apps/docs/content/components/date-range-picker/variants.ts +++ b/apps/docs/content/components/date-range-picker/variants.ts @@ -1,22 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
    - {variants.map((variant) => ( -
    - -
    - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/visible-month.raw.jsx b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx new file mode 100644 index 000000000..a45041c3d --- /dev/null +++ b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx @@ -0,0 +1,9 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/visible-month.ts b/apps/docs/content/components/date-range-picker/visible-month.ts index 0f30be241..7c3a2abe6 100644 --- a/apps/docs/content/components/date-range-picker/visible-month.ts +++ b/apps/docs/content/components/date-range-picker/visible-month.ts @@ -1,15 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./visible-month.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx new file mode 100644 index 000000000..3107c1c48 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx @@ -0,0 +1,9 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts index 5e5d03a2f..5e5431496 100644 --- a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts +++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts @@ -1,16 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./with-month-and-year-pickers.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx new file mode 100644 index 000000000..e988e9583 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx @@ -0,0 +1,18 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseZonedDateTime} from "@internationalized/date"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/date-range-picker/with-time-field.ts b/apps/docs/content/components/date-range-picker/with-time-field.ts index 318f9f377..8df135a00 100644 --- a/apps/docs/content/components/date-range-picker/with-time-field.ts +++ b/apps/docs/content/components/date-range-picker/with-time-field.ts @@ -1,21 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseZonedDateTime} from "@internationalized/date"; - -export default function App() { - return ( -
    - -
    - ); -}`; +import App from "./with-time-field.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/divider/usage.raw.jsx b/apps/docs/content/components/divider/usage.raw.jsx new file mode 100644 index 000000000..580e85126 --- /dev/null +++ b/apps/docs/content/components/divider/usage.raw.jsx @@ -0,0 +1,20 @@ +import {Divider} from "@nextui-org/react"; + +export default function App() { + return ( +
    +
    +

    NextUI Components

    +

    Beautiful, fast and modern React UI library.

    +
    + +
    +
    Blog
    + +
    Docs
    + +
    Source
    +
    +
    + ); +} diff --git a/apps/docs/content/components/divider/usage.ts b/apps/docs/content/components/divider/usage.ts index d3509c641..1118304c3 100644 --- a/apps/docs/content/components/divider/usage.ts +++ b/apps/docs/content/components/divider/usage.ts @@ -1,23 +1,4 @@ -const App = `import {Divider} from "@nextui-org/react"; - -export default function App() { - return ( -
    -
    -

    NextUI Components

    -

    Beautiful, fast and modern React UI library.

    -
    - -
    -
    Blog
    - -
    Docs
    - -
    Source
    -
    -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/backdrop.raw.jsx b/apps/docs/content/components/drawer/backdrop.raw.jsx new file mode 100644 index 000000000..2985ae261 --- /dev/null +++ b/apps/docs/content/components/drawer/backdrop.raw.jsx @@ -0,0 +1,134 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, + Input, + Checkbox, + Link, +} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export const LockIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [backdrop, setBackdrop] = React.useState("opaque"); + + const backdrops = ["opaque", "blur", "transparent"]; + + const handleBackdropChange = (backdrop) => { + setBackdrop(backdrop); + onOpen(); + }; + + return ( + <> +
    + {backdrops.map((backdrop) => ( + + ))} +
    + + + {(onClose) => ( + <> + Log in + + + } + label="Email" + placeholder="Enter your email" + variant="bordered" + /> + + } + label="Password" + placeholder="Enter your password" + type="password" + variant="bordered" + /> +
    + + Remember me + + + Forgot password? + +
    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/backdrop.ts b/apps/docs/content/components/drawer/backdrop.ts index 83f53e0f7..53412b0f5 100644 --- a/apps/docs/content/components/drawer/backdrop.ts +++ b/apps/docs/content/components/drawer/backdrop.ts @@ -1,130 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -);`; - -const LockIcon = `export const LockIcon = (props) => ( - -);`; - -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react"; -import {MailIcon} from "./MailIcon"; -import {LockIcon} from "./LockIcon"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [backdrop, setBackdrop] = React.useState("opaque"); - - const backdrops = ["opaque", "blur", "transparent"]; - - const handleBackdropChange = (backdrop) => { - setBackdrop(backdrop); - onOpen(); - }; - - return ( - <> -
    - {backdrops.map((backdrop) => ( - - ))} -
    - - - {(onClose) => ( - <> - Log in - - - } - label="Email" - placeholder="Enter your email" - variant="bordered" - /> - - } - label="Password" - placeholder="Enter your password" - type="password" - variant="bordered" - /> -
    - - Remember me - - - Forgot password? - -
    -     - - - - - - )} -     -     - - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, - "/LockIcon.jsx": LockIcon, }; export default { diff --git a/apps/docs/content/components/drawer/custom-motion.raw.jsx b/apps/docs/content/components/drawer/custom-motion.raw.jsx new file mode 100644 index 000000000..6baf7f42f --- /dev/null +++ b/apps/docs/content/components/drawer/custom-motion.raw.jsx @@ -0,0 +1,61 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Custom Motion Drawer + +

    This drawer has custom enter/exit animations.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/custom-motion.ts b/apps/docs/content/components/drawer/custom-motion.ts index 62140e8e5..389f462dd 100644 --- a/apps/docs/content/components/drawer/custom-motion.ts +++ b/apps/docs/content/components/drawer/custom-motion.ts @@ -1,58 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Custom Motion Drawer - -

    - This drawer has custom enter/exit animations. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/custom-styles.raw.jsx b/apps/docs/content/components/drawer/custom-styles.raw.jsx new file mode 100644 index 000000000..1953d9962 --- /dev/null +++ b/apps/docs/content/components/drawer/custom-styles.raw.jsx @@ -0,0 +1,342 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, + Image, + Link, + Tooltip, + Avatar, + AvatarGroup, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + + + + +
    + + +
    +
    + + + + + + +
    +     + +
    + Event image +
    +
    +

    SF Bay Area Meetup in November

    +

    + 555 California St, San Francisco, CA 94103 +

    +
    +
    +
    +
    Nov
    +
    + 19 +
    +
    +
    +

    + Tuesday, November 19 +

    +

    5:00 PM - 9:00 PM PST

    +
    +
    +
    +
    + + + + + + +
    +
    + + + + } + className="group gap-x-0.5 text-medium text-foreground font-medium" + href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103" + rel="noreferrer noopener" + > + 555 California St suite 500 + +

    San Francisco, California

    +
    +
    +
    + About the event +
    +

    + Hey Bay Area! We are excited to announce our next meetup on Tuesday, + November 19th. +

    +

    + Join us for an evening of insightful discussions and hands-on workshops + focused on the latest developments in web development and design. Our + featured speakers will share their experiences with modern frontend + frameworks, responsive design patterns, and emerging web technologies. + You'll have the opportunity to network with fellow developers and + designers while enjoying refreshments and snacks. +

    +

    + During the main session, we'll dive deep into practical examples of + building scalable applications, exploring best practices for component + architecture, and understanding advanced state management techniques. Our + interactive workshop portion will let you apply these concepts directly, + with experienced mentors available to provide guidance and answer your + questions. Whether you're a seasoned developer or just starting your + journey, you'll find valuable takeaways from this session. +

    + +

    + Brought to you by the{" "} + + NextUI team + + . +

    +
    +
    +
    + Hosted By +
    + + NextUI Team +
    +
    +
    + 105 Going +
    + + + + + + + + + + + + + + +
    +
    +
    +
    +     + + + Contact the host + + + Report event + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/custom-styles.ts b/apps/docs/content/components/drawer/custom-styles.ts new file mode 100644 index 000000000..da3ea9093 --- /dev/null +++ b/apps/docs/content/components/drawer/custom-styles.ts @@ -0,0 +1,9 @@ +import App from "./custom-styles.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/drawer/form.raw.jsx b/apps/docs/content/components/drawer/form.raw.jsx new file mode 100644 index 000000000..919859467 --- /dev/null +++ b/apps/docs/content/components/drawer/form.raw.jsx @@ -0,0 +1,116 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, + Input, + Checkbox, + Link, +} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export const LockIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Log in + + + } + label="Email" + placeholder="Enter your email" + variant="bordered" + /> + + } + label="Password" + placeholder="Enter your password" + type="password" + variant="bordered" + /> +
    + + Remember me + + + Forgot password? + +
    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/form.ts b/apps/docs/content/components/drawer/form.ts index f087d8de0..c9bad48bd 100644 --- a/apps/docs/content/components/drawer/form.ts +++ b/apps/docs/content/components/drawer/form.ts @@ -1,113 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -); -`; - -const LockIcon = `export const LockIcon = (props) => ( - -);`; - -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react"; -import {MailIcon} from "./MailIcon"; -import {LockIcon} from "./LockIcon"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Log in - - - } - label="Email" - placeholder="Enter your email" - variant="bordered" - /> - - } - label="Password" - placeholder="Enter your password" - type="password" - variant="bordered" - /> -
    - - Remember me - - - Forgot password? - -
    -     - - - - - - )} -     -     - - ); -}`; +import App from "./form.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, - "/LockIcon.jsx": LockIcon, }; export default { diff --git a/apps/docs/content/components/drawer/index.ts b/apps/docs/content/components/drawer/index.ts index e9fa1947c..d04c3bf31 100644 --- a/apps/docs/content/components/drawer/index.ts +++ b/apps/docs/content/components/drawer/index.ts @@ -5,6 +5,7 @@ import placement from "./placement"; import form from "./form"; import backdrop from "./backdrop"; import customMotion from "./custom-motion"; +import customStyles from "./custom-styles"; export const drawerContent = { usage, @@ -14,4 +15,5 @@ export const drawerContent = { form, backdrop, customMotion, + customStyles, }; diff --git a/apps/docs/content/components/drawer/non-dismissable.raw.jsx b/apps/docs/content/components/drawer/non-dismissable.raw.jsx new file mode 100644 index 000000000..6e91e6468 --- /dev/null +++ b/apps/docs/content/components/drawer/non-dismissable.raw.jsx @@ -0,0 +1,52 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Non Dismissable Drawer + +

    + Click the close button or action button to close the drawer. Clicking outside or + pressing the escape key won't close it. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/non-dismissable.ts b/apps/docs/content/components/drawer/non-dismissable.ts index fc9f1ded2..a1281cb23 100644 --- a/apps/docs/content/components/drawer/non-dismissable.ts +++ b/apps/docs/content/components/drawer/non-dismissable.ts @@ -1,47 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Non Dismissable Drawer - -

    - Click the close button or action button to close the drawer. - Clicking outside or pressing the escape key won't close it. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./non-dismissable.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/placement.raw.jsx b/apps/docs/content/components/drawer/placement.raw.jsx new file mode 100644 index 000000000..d91526dd8 --- /dev/null +++ b/apps/docs/content/components/drawer/placement.raw.jsx @@ -0,0 +1,60 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [placement, setPlacement] = React.useState("left"); + + const handleOpen = (placement) => { + setPlacement(placement); + onOpen(); + }; + + return ( + <> +
    + {["left", "right", "top", "bottom"].map((placement) => ( + + ))} +
    + + + {(onClose) => ( + <> + Drawer Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/placement.ts b/apps/docs/content/components/drawer/placement.ts index bd66a29ba..eee224436 100644 --- a/apps/docs/content/components/drawer/placement.ts +++ b/apps/docs/content/components/drawer/placement.ts @@ -1,63 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [placement, setPlacement] = React.useState("left") - - const handleOpen = (placement) => { - setPlacement(placement) - onOpen(); - } - - return ( - <> -
    - {["left", "right", "top", "bottom"].map((placement) => ( - - ))} -
    - - - {(onClose) => ( - <> - Drawer Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/sizes.raw.jsx b/apps/docs/content/components/drawer/sizes.raw.jsx new file mode 100644 index 000000000..a61da6ead --- /dev/null +++ b/apps/docs/content/components/drawer/sizes.raw.jsx @@ -0,0 +1,62 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onClose} = useDisclosure(); + const [size, setSize] = React.useState("md"); + + const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; + + const handleOpen = (size) => { + setSize(size); + onOpen(); + }; + + return ( + <> +
    + {sizes.map((size) => ( + + ))} +
    + + + {(onClose) => ( + <> + Drawer Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/sizes.ts b/apps/docs/content/components/drawer/sizes.ts index 6fa5d5589..85a2f5b30 100644 --- a/apps/docs/content/components/drawer/sizes.ts +++ b/apps/docs/content/components/drawer/sizes.ts @@ -1,59 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onClose} = useDisclosure(); - const [size, setSize] = React.useState('md') - - const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; - - const handleOpen = (size) => { - setSize(size) - onOpen(); - } - - return ( - <> -
    - {sizes.map((size) => ( - - ))} -
    - - - {(onClose) => ( - <> - Drawer Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/usage.raw.jsx b/apps/docs/content/components/drawer/usage.raw.jsx new file mode 100644 index 000000000..9b878ad52 --- /dev/null +++ b/apps/docs/content/components/drawer/usage.raw.jsx @@ -0,0 +1,55 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Drawer Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/drawer/usage.ts b/apps/docs/content/components/drawer/usage.ts index e4de7c5f5..1118304c3 100644 --- a/apps/docs/content/components/drawer/usage.ts +++ b/apps/docs/content/components/drawer/usage.ts @@ -1,50 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Drawer Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/action.raw.jsx b/apps/docs/content/components/dropdown/action.raw.jsx new file mode 100644 index 000000000..281521b42 --- /dev/null +++ b/apps/docs/content/components/dropdown/action.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + alert(key)}> + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/action.ts b/apps/docs/content/components/dropdown/action.ts index 21a6a4109..3f0f8e8a4 100644 --- a/apps/docs/content/components/dropdown/action.ts +++ b/apps/docs/content/components/dropdown/action.ts @@ -1,29 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - alert(key)} - > - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./action.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/backdrop.raw.jsx b/apps/docs/content/components/dropdown/backdrop.raw.jsx new file mode 100644 index 000000000..c96bc3d0c --- /dev/null +++ b/apps/docs/content/components/dropdown/backdrop.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/backdrop.ts b/apps/docs/content/components/dropdown/backdrop.ts index e5acaa671..53412b0f5 100644 --- a/apps/docs/content/components/dropdown/backdrop.ts +++ b/apps/docs/content/components/dropdown/backdrop.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx new file mode 100644 index 000000000..24e4b8af8 --- /dev/null +++ b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx @@ -0,0 +1,123 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownSection, + DropdownItem, + Button, + User, +} from "@nextui-org/react"; + +export const PlusIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + + + + + + + Dashboard + Settings + }> + New Project + + + + + + Quick search + + + + + + + } + > + Theme + + + + + Help & Feedback + Log Out + + + + ); +} diff --git a/apps/docs/content/components/dropdown/custom-items-styles.ts b/apps/docs/content/components/dropdown/custom-items-styles.ts index 15127eb7c..7589406d7 100644 --- a/apps/docs/content/components/dropdown/custom-items-styles.ts +++ b/apps/docs/content/components/dropdown/custom-items-styles.ts @@ -1,129 +1,7 @@ -const PlusIcon = `export const PlusIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, User} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon.jsx"; -export default function App() { - return ( - - - - - - - - - - - Dashboard - - Settings - } - > - New Project - - - - - - Quick search - - - - - - - } - > - Theme - - - - - - Help & Feedback - - Log Out - - - - ); -}`; +import App from "./custom-items-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PlusIcon.jsx": PlusIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx new file mode 100644 index 000000000..83eefe76d --- /dev/null +++ b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx @@ -0,0 +1,178 @@ +import { + Dropdown, + DropdownSection, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, + cn, +} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + + + } + > + Delete file + + + + + ); +} diff --git a/apps/docs/content/components/dropdown/custom-popover-styles.ts b/apps/docs/content/components/dropdown/custom-popover-styles.ts index b93aee09c..348d838d2 100644 --- a/apps/docs/content/components/dropdown/custom-popover-styles.ts +++ b/apps/docs/content/components/dropdown/custom-popover-styles.ts @@ -1,179 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - - - } - > - Delete file - - - - - ); -}`; +import App from "./custom-popover-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/custom-trigger.raw.jsx b/apps/docs/content/components/dropdown/custom-trigger.raw.jsx new file mode 100644 index 000000000..f610f72c7 --- /dev/null +++ b/apps/docs/content/components/dropdown/custom-trigger.raw.jsx @@ -0,0 +1,69 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Avatar, + User, +} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +

    Signed in as

    +

    zoey@example.com

    +     + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + +     +     + + + + + + +

    Signed in as

    +

    @tonyreichert

    +     + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + +     +     +
    + ); +} diff --git a/apps/docs/content/components/dropdown/custom-trigger.ts b/apps/docs/content/components/dropdown/custom-trigger.ts index 7f0871458..dcc6b44a0 100644 --- a/apps/docs/content/components/dropdown/custom-trigger.ts +++ b/apps/docs/content/components/dropdown/custom-trigger.ts @@ -1,77 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar, User} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -

    Signed in as

    -

    zoey@example.com

    -     - - My Settings - - Team Settings - - Analytics - - System - Configurations - - Help & Feedback - - - Log Out - -     -     - - - - - - -

    Signed in as

    -

    @tonyreichert

    -     - - My Settings - - Team Settings - - Analytics - - System - Configurations - - Help & Feedback - - - Log Out - -     -     -
    - ); -}`; +import App from "./custom-trigger.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/description.raw.jsx b/apps/docs/content/components/dropdown/description.raw.jsx new file mode 100644 index 000000000..734cf9ebb --- /dev/null +++ b/apps/docs/content/components/dropdown/description.raw.jsx @@ -0,0 +1,160 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/description.ts b/apps/docs/content/components/dropdown/description.ts index f5dbd0138..aeb6340b6 100644 --- a/apps/docs/content/components/dropdown/description.ts +++ b/apps/docs/content/components/dropdown/description.ts @@ -1,170 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/disabled-keys.raw.jsx b/apps/docs/content/components/dropdown/disabled-keys.raw.jsx new file mode 100644 index 000000000..00e1fa796 --- /dev/null +++ b/apps/docs/content/components/dropdown/disabled-keys.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/disabled-keys.ts b/apps/docs/content/components/dropdown/disabled-keys.ts index f37a8f339..b179b7cb7 100644 --- a/apps/docs/content/components/dropdown/disabled-keys.ts +++ b/apps/docs/content/components/dropdown/disabled-keys.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./disabled-keys.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/dynamic.raw.jsx b/apps/docs/content/components/dropdown/dynamic.raw.jsx new file mode 100644 index 000000000..885ee88b9 --- /dev/null +++ b/apps/docs/content/components/dropdown/dynamic.raw.jsx @@ -0,0 +1,41 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const items = [ + { + key: "new", + label: "New file", + }, + { + key: "copy", + label: "Copy link", + }, + { + key: "edit", + label: "Edit file", + }, + { + key: "delete", + label: "Delete file", + }, + ]; + + return ( + + + + + + {(item) => ( + + {item.label} + + )} + + + ); +} diff --git a/apps/docs/content/components/dropdown/dynamic.ts b/apps/docs/content/components/dropdown/dynamic.ts index d3e672ca5..5d3c97bb9 100644 --- a/apps/docs/content/components/dropdown/dynamic.ts +++ b/apps/docs/content/components/dropdown/dynamic.ts @@ -1,48 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - const items = [ - { - key: "new", - label: "New file", - }, - { - key: "copy", - label: "Copy link", - }, - { - key: "edit", - label: "Edit file", - }, - { - key: "delete", - label: "Delete file", - } - ]; - - return ( - - - - - - {(item) => ( - - {item.label} - - )} - - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/icons.raw.jsx b/apps/docs/content/components/dropdown/icons.raw.jsx new file mode 100644 index 000000000..ea47c662e --- /dev/null +++ b/apps/docs/content/components/dropdown/icons.raw.jsx @@ -0,0 +1,155 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/icons.ts b/apps/docs/content/components/dropdown/icons.ts index 0b9d01ada..22a410c88 100644 --- a/apps/docs/content/components/dropdown/icons.ts +++ b/apps/docs/content/components/dropdown/icons.ts @@ -1,165 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/multiple-selection.raw.jsx b/apps/docs/content/components/dropdown/multiple-selection.raw.jsx new file mode 100644 index 000000000..a631230d9 --- /dev/null +++ b/apps/docs/content/components/dropdown/multiple-selection.raw.jsx @@ -0,0 +1,35 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/multiple-selection.raw.tsx b/apps/docs/content/components/dropdown/multiple-selection.raw.tsx new file mode 100644 index 000000000..1deb78528 --- /dev/null +++ b/apps/docs/content/components/dropdown/multiple-selection.raw.tsx @@ -0,0 +1,38 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replace(/_/g, ""), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/multiple-selection.ts b/apps/docs/content/components/dropdown/multiple-selection.ts index 9d439aa55..033f4a352 100644 --- a/apps/docs/content/components/dropdown/multiple-selection.ts +++ b/apps/docs/content/components/dropdown/multiple-selection.ts @@ -1,87 +1,15 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; - -const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; -import type { Selection } from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; +import App from "./multiple-selection.raw.jsx?raw"; +import AppTs from "./multiple-selection.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/dropdown/sections.raw.jsx b/apps/docs/content/components/dropdown/sections.raw.jsx new file mode 100644 index 000000000..1d8e2e22f --- /dev/null +++ b/apps/docs/content/components/dropdown/sections.raw.jsx @@ -0,0 +1,171 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownSection, + DropdownItem, + Button, + cn, +} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + + + } + > + Delete file + + + + + ); +} diff --git a/apps/docs/content/components/dropdown/sections.ts b/apps/docs/content/components/dropdown/sections.ts index d66ebc8a0..17cd360ea 100644 --- a/apps/docs/content/components/dropdown/sections.ts +++ b/apps/docs/content/components/dropdown/sections.ts @@ -1,173 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - - - } - > - Delete file - - - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/shortcut.raw.jsx b/apps/docs/content/components/dropdown/shortcut.raw.jsx new file mode 100644 index 000000000..012ce4806 --- /dev/null +++ b/apps/docs/content/components/dropdown/shortcut.raw.jsx @@ -0,0 +1,25 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + New file + + + Copy link + + + Edit file + + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/shortcut.ts b/apps/docs/content/components/dropdown/shortcut.ts index 26a2c6526..a02522a1b 100644 --- a/apps/docs/content/components/dropdown/shortcut.ts +++ b/apps/docs/content/components/dropdown/shortcut.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./shortcut.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/single-selection.raw.jsx b/apps/docs/content/components/dropdown/single-selection.raw.jsx new file mode 100644 index 000000000..80ad30b87 --- /dev/null +++ b/apps/docs/content/components/dropdown/single-selection.raw.jsx @@ -0,0 +1,34 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replace(/_/g, ""), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/single-selection.raw.tsx b/apps/docs/content/components/dropdown/single-selection.raw.tsx new file mode 100644 index 000000000..4c2edfa60 --- /dev/null +++ b/apps/docs/content/components/dropdown/single-selection.raw.tsx @@ -0,0 +1,37 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replace(/_/g, ""), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/single-selection.ts b/apps/docs/content/components/dropdown/single-selection.ts index 8bf8911ff..8c6c97a32 100644 --- a/apps/docs/content/components/dropdown/single-selection.ts +++ b/apps/docs/content/components/dropdown/single-selection.ts @@ -1,85 +1,15 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; - -const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; -import type { Selection } from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; +import App from "./single-selection.raw.jsx?raw"; +import AppTs from "./single-selection.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/dropdown/usage.raw.jsx b/apps/docs/content/components/dropdown/usage.raw.jsx new file mode 100644 index 000000000..e8d76aeb4 --- /dev/null +++ b/apps/docs/content/components/dropdown/usage.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/usage.ts b/apps/docs/content/components/dropdown/usage.ts index 214d0ff56..1118304c3 100644 --- a/apps/docs/content/components/dropdown/usage.ts +++ b/apps/docs/content/components/dropdown/usage.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/variants.raw.jsx b/apps/docs/content/components/dropdown/variants.raw.jsx new file mode 100644 index 000000000..22fbd2a6c --- /dev/null +++ b/apps/docs/content/components/dropdown/variants.raw.jsx @@ -0,0 +1,55 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; + + const DropdownContent = ({variant, color}) => ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); + + return ( +
    + {variants.map((variant) => ( + + ))} + + Default + Primary + Secondary + Success + Warning + Danger + +
    + ); +} diff --git a/apps/docs/content/components/dropdown/variants.ts b/apps/docs/content/components/dropdown/variants.ts index f2c577d71..ddea95fb2 100644 --- a/apps/docs/content/components/dropdown/variants.ts +++ b/apps/docs/content/components/dropdown/variants.ts @@ -1,58 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default") - - const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; - - const DropdownContent = ({variant, color}) => ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ) - - return ( -
    - {variants.map((variant) => ( - - ))} - - Default - Primary - Secondary - Success - Warning - Danger - -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/blurred.raw.jsx b/apps/docs/content/components/image/blurred.raw.jsx new file mode 100644 index 000000000..c1bcc75e1 --- /dev/null +++ b/apps/docs/content/components/image/blurred.raw.jsx @@ -0,0 +1,13 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI Album Cover + ); +} diff --git a/apps/docs/content/components/image/blurred.ts b/apps/docs/content/components/image/blurred.ts index 379e433c7..0c08e28f9 100644 --- a/apps/docs/content/components/image/blurred.ts +++ b/apps/docs/content/components/image/blurred.ts @@ -1,16 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI Album Cover - ); -}`; +import App from "./blurred.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/fallback.raw.jsx b/apps/docs/content/components/image/fallback.raw.jsx new file mode 100644 index 000000000..dba0cca44 --- /dev/null +++ b/apps/docs/content/components/image/fallback.raw.jsx @@ -0,0 +1,13 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI Image with fallback + ); +} diff --git a/apps/docs/content/components/image/fallback.ts b/apps/docs/content/components/image/fallback.ts index 165089d80..20854071f 100644 --- a/apps/docs/content/components/image/fallback.ts +++ b/apps/docs/content/components/image/fallback.ts @@ -1,16 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI Image with fallback - ); -}`; +import App from "./fallback.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/loading.raw.jsx b/apps/docs/content/components/image/loading.raw.jsx new file mode 100644 index 000000000..3ad1b1761 --- /dev/null +++ b/apps/docs/content/components/image/loading.raw.jsx @@ -0,0 +1,12 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI hero Image with delay + ); +} diff --git a/apps/docs/content/components/image/loading.ts b/apps/docs/content/components/image/loading.ts index e2d70af02..0c8fea5a5 100644 --- a/apps/docs/content/components/image/loading.ts +++ b/apps/docs/content/components/image/loading.ts @@ -1,15 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI hero Image with delay - ); -}`; +import App from "./loading.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/nextjs.raw.jsx b/apps/docs/content/components/image/nextjs.raw.jsx new file mode 100644 index 000000000..deee4e212 --- /dev/null +++ b/apps/docs/content/components/image/nextjs.raw.jsx @@ -0,0 +1,14 @@ +import {Image} from "@nextui-org/react"; +import NextImage from "next/image"; + +export default function App() { + return ( + NextUI hero Image + ); +} diff --git a/apps/docs/content/components/image/nextjs.ts b/apps/docs/content/components/image/nextjs.ts index ff6a18e14..1d6919663 100644 --- a/apps/docs/content/components/image/nextjs.ts +++ b/apps/docs/content/components/image/nextjs.ts @@ -1,17 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; -import NextImage from "next/image"; - -export default function App() { - return ( - NextUI hero Image - ); -}`; +import App from "./nextjs.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/usage.raw.jsx b/apps/docs/content/components/image/usage.raw.jsx new file mode 100644 index 000000000..f7be019c8 --- /dev/null +++ b/apps/docs/content/components/image/usage.raw.jsx @@ -0,0 +1,11 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI hero Image + ); +} diff --git a/apps/docs/content/components/image/usage.ts b/apps/docs/content/components/image/usage.ts index 7041554fe..1118304c3 100644 --- a/apps/docs/content/components/image/usage.ts +++ b/apps/docs/content/components/image/usage.ts @@ -1,14 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI hero Image - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/zoomed.raw.jsx b/apps/docs/content/components/image/zoomed.raw.jsx new file mode 100644 index 000000000..8e05d6217 --- /dev/null +++ b/apps/docs/content/components/image/zoomed.raw.jsx @@ -0,0 +1,12 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI Fruit Image with Zoom + ); +} diff --git a/apps/docs/content/components/image/zoomed.ts b/apps/docs/content/components/image/zoomed.ts index 2aaa13b28..19b1fbb78 100644 --- a/apps/docs/content/components/image/zoomed.ts +++ b/apps/docs/content/components/image/zoomed.ts @@ -1,15 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI Fruit Image with Zoom - ); -}`; +import App from "./zoomed.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/index.ts b/apps/docs/content/components/index.ts index 45cfacb81..ced4352a6 100644 --- a/apps/docs/content/components/index.ts +++ b/apps/docs/content/components/index.ts @@ -18,6 +18,7 @@ export * from "./user"; export * from "./skeleton"; export * from "./snippet"; export * from "./input"; +export * from "./input-otp"; export * from "./textarea"; export * from "./image"; export * from "./radio-group"; diff --git a/apps/docs/content/components/input-otp/allowed-keys.raw.jsx b/apps/docs/content/components/input-otp/allowed-keys.raw.jsx new file mode 100644 index 000000000..515ca67c4 --- /dev/null +++ b/apps/docs/content/components/input-otp/allowed-keys.raw.jsx @@ -0,0 +1,25 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const allowedKeysConfig = [ + { + name: "Only lowercase letters (a-z):", + value: "^[a-z]*$", + }, + { + name: "Only uppercase letters (A-Z):", + value: "^[A-Z]*$", + }, + ]; + + return ( +
    + {allowedKeysConfig.map((config, idx) => ( +
    +
    {config.name}
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input-otp/allowed-keys.ts b/apps/docs/content/components/input-otp/allowed-keys.ts new file mode 100644 index 000000000..4b28d9836 --- /dev/null +++ b/apps/docs/content/components/input-otp/allowed-keys.ts @@ -0,0 +1,9 @@ +import App from "./allowed-keys.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/colors.raw.jsx b/apps/docs/content/components/input-otp/colors.raw.jsx new file mode 100644 index 000000000..18c2464a3 --- /dev/null +++ b/apps/docs/content/components/input-otp/colors.raw.jsx @@ -0,0 +1,16 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( +
    +
    color: {color}
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input-otp/colors.ts b/apps/docs/content/components/input-otp/colors.ts new file mode 100644 index 000000000..d5bef810a --- /dev/null +++ b/apps/docs/content/components/input-otp/colors.ts @@ -0,0 +1,9 @@ +import App from "./colors.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/controlled.raw.jsx b/apps/docs/content/components/input-otp/controlled.raw.jsx new file mode 100644 index 000000000..704223054 --- /dev/null +++ b/apps/docs/content/components/input-otp/controlled.raw.jsx @@ -0,0 +1,13 @@ +import {InputOtp} from "@nextui-org/react"; +import React from "react"; + +export default function App() { + const [value, setValue] = React.useState(""); + + return ( +
    + +

    value: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/input-otp/controlled.ts b/apps/docs/content/components/input-otp/controlled.ts new file mode 100644 index 000000000..2c3f0cacb --- /dev/null +++ b/apps/docs/content/components/input-otp/controlled.ts @@ -0,0 +1,9 @@ +import App from "./controlled.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/custom-styles.raw.jsx b/apps/docs/content/components/input-otp/custom-styles.raw.jsx new file mode 100644 index 000000000..ab0903a72 --- /dev/null +++ b/apps/docs/content/components/input-otp/custom-styles.raw.jsx @@ -0,0 +1,33 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/input-otp/custom-styles.ts b/apps/docs/content/components/input-otp/custom-styles.ts new file mode 100644 index 000000000..da3ea9093 --- /dev/null +++ b/apps/docs/content/components/input-otp/custom-styles.ts @@ -0,0 +1,9 @@ +import App from "./custom-styles.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/description.raw.jsx b/apps/docs/content/components/input-otp/description.raw.jsx new file mode 100644 index 000000000..54ac7feb3 --- /dev/null +++ b/apps/docs/content/components/input-otp/description.raw.jsx @@ -0,0 +1,9 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/input-otp/description.ts b/apps/docs/content/components/input-otp/description.ts new file mode 100644 index 000000000..aeb6340b6 --- /dev/null +++ b/apps/docs/content/components/input-otp/description.ts @@ -0,0 +1,9 @@ +import App from "./description.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/disabled.raw.jsx b/apps/docs/content/components/input-otp/disabled.raw.jsx new file mode 100644 index 000000000..d6fb4a2cc --- /dev/null +++ b/apps/docs/content/components/input-otp/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/input-otp/disabled.ts b/apps/docs/content/components/input-otp/disabled.ts new file mode 100644 index 000000000..1a215cc91 --- /dev/null +++ b/apps/docs/content/components/input-otp/disabled.ts @@ -0,0 +1,9 @@ +import App from "./disabled.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/error-message.raw.jsx b/apps/docs/content/components/input-otp/error-message.raw.jsx new file mode 100644 index 000000000..5bce6a865 --- /dev/null +++ b/apps/docs/content/components/input-otp/error-message.raw.jsx @@ -0,0 +1,9 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/input-otp/error-message.ts b/apps/docs/content/components/input-otp/error-message.ts new file mode 100644 index 000000000..fb8101b13 --- /dev/null +++ b/apps/docs/content/components/input-otp/error-message.ts @@ -0,0 +1,9 @@ +import App from "./error-message.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/form.raw.jsx b/apps/docs/content/components/input-otp/form.raw.jsx new file mode 100644 index 000000000..df3646852 --- /dev/null +++ b/apps/docs/content/components/input-otp/form.raw.jsx @@ -0,0 +1,46 @@ +import {InputOtp} from "@nextui-org/react"; +import {useForm, Controller} from "react-hook-form"; +import {Button} from "@nextui-org/react"; + +export default function App() { + const { + handleSubmit, + control, + formState: {errors}, + } = useForm({ + defaultValues: { + otp: "", + }, + }); + + const onSubmit = (data) => { + alert(JSON.stringify(data)); + }; + + return ( +
    + ( + + )} + rules={{ + required: "OTP is required", + minLength: { + value: 4, + message: "Please enter a valid OTP", + }, + }} + /> + + + ); +} diff --git a/apps/docs/content/components/input-otp/form.raw.tsx b/apps/docs/content/components/input-otp/form.raw.tsx new file mode 100644 index 000000000..4c05544f7 --- /dev/null +++ b/apps/docs/content/components/input-otp/form.raw.tsx @@ -0,0 +1,50 @@ +import {InputOtp} from "@nextui-org/react"; +import {useForm, Controller, SubmitHandler} from "react-hook-form"; +import {Button} from "@nextui-org/react"; + +interface FormValues { + otp: string; +} + +export default function App() { + const { + handleSubmit, + control, + formState: {errors}, + } = useForm({ + defaultValues: { + otp: "", + }, + }); + + const onSubmit: SubmitHandler = (data) => { + alert(JSON.stringify(data)); + }; + + return ( +
    + ( + + )} + rules={{ + required: "OTP is required", + minLength: { + value: 4, + message: "Please enter a valid OTP", + }, + }} + /> + + + ); +} diff --git a/apps/docs/content/components/input-otp/form.ts b/apps/docs/content/components/input-otp/form.ts new file mode 100644 index 000000000..2f8c0d849 --- /dev/null +++ b/apps/docs/content/components/input-otp/form.ts @@ -0,0 +1,15 @@ +import App from "./form.raw.jsx?raw"; +import AppTs from "./form.raw.tsx?raw"; + +const react = { + "/App.jsx": App, +}; + +const reactTs = { + "/App.tsx": AppTs, +}; + +export default { + ...react, + ...reactTs, +}; diff --git a/apps/docs/content/components/input-otp/index.ts b/apps/docs/content/components/input-otp/index.ts new file mode 100644 index 000000000..81fa6be2b --- /dev/null +++ b/apps/docs/content/components/input-otp/index.ts @@ -0,0 +1,35 @@ +import usage from "./usage"; +import disabled from "./disabled"; +import readonly from "./readonly"; +import required from "./required"; +import sizes from "./sizes"; +import colors from "./colors"; +import variants from "./variants"; +import radius from "./radius"; +import description from "./description"; +import errorMessage from "./error-message"; +import allowedKeys from "./allowed-keys"; +import controlled from "./controlled"; +import password from "./password"; +import form from "./form"; +import customStyles from "./custom-styles"; +import lengths from "./lengths"; + +export const inputOtpContent = { + usage, + disabled, + readonly, + required, + sizes, + colors, + variants, + radius, + description, + errorMessage, + allowedKeys, + controlled, + password, + form, + customStyles, + lengths, +}; diff --git a/apps/docs/content/components/input-otp/lengths.raw.jsx b/apps/docs/content/components/input-otp/lengths.raw.jsx new file mode 100644 index 000000000..01c8e04eb --- /dev/null +++ b/apps/docs/content/components/input-otp/lengths.raw.jsx @@ -0,0 +1,17 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    +
    +

    Basic length (4 digits)

    + +
    + +
    +

    6 digits OTP

    + +
    +
    + ); +} diff --git a/apps/docs/content/components/input-otp/lengths.ts b/apps/docs/content/components/input-otp/lengths.ts new file mode 100644 index 000000000..1e958bacc --- /dev/null +++ b/apps/docs/content/components/input-otp/lengths.ts @@ -0,0 +1,9 @@ +import App from "./lengths.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/password.raw.jsx b/apps/docs/content/components/input-otp/password.raw.jsx new file mode 100644 index 000000000..f7e95bdba --- /dev/null +++ b/apps/docs/content/components/input-otp/password.raw.jsx @@ -0,0 +1,9 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/input-otp/password.ts b/apps/docs/content/components/input-otp/password.ts new file mode 100644 index 000000000..7751eaf93 --- /dev/null +++ b/apps/docs/content/components/input-otp/password.ts @@ -0,0 +1,9 @@ +import App from "./password.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/radius.raw.jsx b/apps/docs/content/components/input-otp/radius.raw.jsx new file mode 100644 index 000000000..30da83d3c --- /dev/null +++ b/apps/docs/content/components/input-otp/radius.raw.jsx @@ -0,0 +1,16 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const radiusValues = ["none", "sm", "md", "lg", "full"]; + + return ( +
    + {radiusValues.map((radius) => ( +
    +
    radius: {radius}
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input-otp/radius.ts b/apps/docs/content/components/input-otp/radius.ts new file mode 100644 index 000000000..7b78db1ce --- /dev/null +++ b/apps/docs/content/components/input-otp/radius.ts @@ -0,0 +1,9 @@ +import App from "./radius.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/readonly.raw.jsx b/apps/docs/content/components/input-otp/readonly.raw.jsx new file mode 100644 index 000000000..80212c91e --- /dev/null +++ b/apps/docs/content/components/input-otp/readonly.raw.jsx @@ -0,0 +1,9 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    + +
    + ); +} diff --git a/apps/docs/content/components/input-otp/readonly.ts b/apps/docs/content/components/input-otp/readonly.ts new file mode 100644 index 000000000..fabd05ba3 --- /dev/null +++ b/apps/docs/content/components/input-otp/readonly.ts @@ -0,0 +1,9 @@ +import App from "./readonly.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/required.raw.jsx b/apps/docs/content/components/input-otp/required.raw.jsx new file mode 100644 index 000000000..a6317019a --- /dev/null +++ b/apps/docs/content/components/input-otp/required.raw.jsx @@ -0,0 +1,28 @@ +import {Button, InputOtp} from "@nextui-org/react"; + +export default function App() { + return ( +
    { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + const otp = formData.get("otp"); + + alert(`OTP submitted: ${otp}`); + }} + > + + + + ); +} diff --git a/apps/docs/content/components/input-otp/required.ts b/apps/docs/content/components/input-otp/required.ts new file mode 100644 index 000000000..b50b781e6 --- /dev/null +++ b/apps/docs/content/components/input-otp/required.ts @@ -0,0 +1,9 @@ +import App from "./required.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/sizes.raw.jsx b/apps/docs/content/components/input-otp/sizes.raw.jsx new file mode 100644 index 000000000..51a613517 --- /dev/null +++ b/apps/docs/content/components/input-otp/sizes.raw.jsx @@ -0,0 +1,16 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( +
    +
    size: {size}
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input-otp/sizes.ts b/apps/docs/content/components/input-otp/sizes.ts new file mode 100644 index 000000000..85a2f5b30 --- /dev/null +++ b/apps/docs/content/components/input-otp/sizes.ts @@ -0,0 +1,9 @@ +import App from "./sizes.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input-otp/usage.raw.jsx b/apps/docs/content/components/input-otp/usage.raw.jsx new file mode 100644 index 000000000..c44c4bde4 --- /dev/null +++ b/apps/docs/content/components/input-otp/usage.raw.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(""); + + return ( +
    + +
    + OTP value: {value} +
    +
    + ); +} diff --git a/apps/docs/content/components/input-otp/usage.raw.tsx b/apps/docs/content/components/input-otp/usage.raw.tsx new file mode 100644 index 000000000..c8bd37887 --- /dev/null +++ b/apps/docs/content/components/input-otp/usage.raw.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(""); + + return ( +
    + +
    + OTP value: {value} +
    +
    + ); +} diff --git a/apps/docs/content/components/input-otp/usage.ts b/apps/docs/content/components/input-otp/usage.ts new file mode 100644 index 000000000..296c5123a --- /dev/null +++ b/apps/docs/content/components/input-otp/usage.ts @@ -0,0 +1,15 @@ +import App from "./usage.raw.jsx?raw"; +import AppTs from "./usage.raw.tsx?raw"; + +const react = { + "/App.jsx": App, +}; + +const reactTs = { + "/App.tsx": AppTs, +}; + +export default { + ...react, + ...reactTs, +}; diff --git a/apps/docs/content/components/input-otp/variants.raw.jsx b/apps/docs/content/components/input-otp/variants.raw.jsx new file mode 100644 index 000000000..978123f52 --- /dev/null +++ b/apps/docs/content/components/input-otp/variants.raw.jsx @@ -0,0 +1,16 @@ +import {InputOtp} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    +
    variant: {variant}
    + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input-otp/variants.ts b/apps/docs/content/components/input-otp/variants.ts new file mode 100644 index 000000000..ddea95fb2 --- /dev/null +++ b/apps/docs/content/components/input-otp/variants.ts @@ -0,0 +1,9 @@ +import App from "./variants.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/input/clear-button.raw.jsx b/apps/docs/content/components/input/clear-button.raw.jsx new file mode 100644 index 000000000..c2fea3d79 --- /dev/null +++ b/apps/docs/content/components/input/clear-button.raw.jsx @@ -0,0 +1,17 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + console.log("input cleared")} + /> + ); +} diff --git a/apps/docs/content/components/input/clear-button.ts b/apps/docs/content/components/input/clear-button.ts index 892ea1dd4..f84fe2f74 100644 --- a/apps/docs/content/components/input/clear-button.ts +++ b/apps/docs/content/components/input/clear-button.ts @@ -1,19 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - console.log("input cleared")} - className="max-w-xs" - /> - ); -}`; +import App from "./clear-button.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/colors.raw.jsx b/apps/docs/content/components/input/colors.raw.jsx new file mode 100644 index 000000000..f1dd7e6e5 --- /dev/null +++ b/apps/docs/content/components/input/colors.raw.jsx @@ -0,0 +1,21 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/input/colors.ts b/apps/docs/content/components/input/colors.ts index 40885df2c..d5bef810a 100644 --- a/apps/docs/content/components/input/colors.ts +++ b/apps/docs/content/components/input/colors.ts @@ -1,31 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - ]; - - return ( -
    - {colors.map((color) => ( - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/controlled.raw.jsx b/apps/docs/content/components/input/controlled.raw.jsx new file mode 100644 index 000000000..7cb97a37b --- /dev/null +++ b/apps/docs/content/components/input/controlled.raw.jsx @@ -0,0 +1,12 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(""); + + return ( +
    + +

    Input value: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/input/controlled.ts b/apps/docs/content/components/input/controlled.ts index 7c923292b..2c3f0cacb 100644 --- a/apps/docs/content/components/input/controlled.ts +++ b/apps/docs/content/components/input/controlled.ts @@ -1,20 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(""); - - return ( -
    - -

    Input value: {value}

    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/custom-impl.raw.jsx b/apps/docs/content/components/input/custom-impl.raw.jsx new file mode 100644 index 000000000..9a7519207 --- /dev/null +++ b/apps/docs/content/components/input/custom-impl.raw.jsx @@ -0,0 +1,162 @@ +import React, {forwardRef} from "react"; +import {useInput} from "@nextui-org/react"; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export const CloseFilledIcon = (props) => { + return ( + + ); +}; + +const styles = { + label: "text-black/50 dark:text-white/90", + input: [ + "bg-transparent", + "text-black/90 dark:text-white/90", + "placeholder:text-default-700/50 dark:placeholder:text-white/60", + ], + innerWrapper: "bg-transparent", + inputWrapper: [ + "shadow-xl", + "bg-default-200/50", + "dark:bg-default/60", + "backdrop-blur-xl", + "backdrop-saturate-200", + "hover:bg-default-200/70", + "focus-within:!bg-default-200/50", + "dark:hover:bg-default/70", + "dark:focus-within:!bg-default/60", + "!cursor-text", + ], +}; + +const MyInput = forwardRef((props, ref) => { + const { + Component, + label, + domRef, + description, + isClearable, + startContent, + endContent, + shouldLabelBeOutside, + shouldLabelBeInside, + errorMessage, + getBaseProps, + getLabelProps, + getInputProps, + getInnerWrapperProps, + getInputWrapperProps, + getDescriptionProps, + getErrorMessageProps, + getClearButtonProps, + } = useInput({ + ...props, + ref, + // this is just for the example, the props bellow should be passed by the parent component + label: "Search", + type: "search", + placeholder: "Type to search...", + startContent: ( + + ), + // custom styles + classNames: { + ...styles, + }, + }); + + const labelContent = ; + + const end = React.useMemo(() => { + if (isClearable) { + return {endContent || }; + } + + return endContent; + }, [isClearable, getClearButtonProps]); + + const innerWrapper = React.useMemo(() => { + if (startContent || end) { + return ( +
    + {startContent} + + {end} +
    + ); + } + + return ; + }, [startContent, end, getInputProps, getInnerWrapperProps]); + + return ( +
    + + {shouldLabelBeOutside ? labelContent : null} +
    { + domRef.current?.focus(); + }} + onKeyDown={() => { + domRef.current?.focus(); + }} + > + {shouldLabelBeInside ? labelContent : null} + {innerWrapper} +
    + {description &&
    {description}
    } + {errorMessage &&
    {errorMessage}
    } +     +
    + ); +}); + +MyInput.displayName = "MyInput"; + +export default MyInput; diff --git a/apps/docs/content/components/input/custom-impl.ts b/apps/docs/content/components/input/custom-impl.ts index 8fb99cecd..ab37512ce 100644 --- a/apps/docs/content/components/input/custom-impl.ts +++ b/apps/docs/content/components/input/custom-impl.ts @@ -1,164 +1,7 @@ -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const CloseFilledIcon = `export const CloseFilledIcon = (props) => ( - -);`; - -const App = `import React, {forwardRef} from "react"; -import {useInput} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; -import {CloseFilledIcon} from "./CloseFilledIcon"; - -const styles = { - label: "text-black/50 dark:text-white/90", - input: [ - "bg-transparent", - "text-black/90 dark:text-white/90", - "placeholder:text-default-700/50 dark:placeholder:text-white/60", - ], - innerWrapper: "bg-transparent", - inputWrapper: [ - "shadow-xl", - "bg-default-200/50", - "dark:bg-default/60", - "backdrop-blur-xl", - "backdrop-saturate-200", - "hover:bg-default-200/70", - "focus-within:!bg-default-200/50", - "dark:hover:bg-default/70", - "dark:focus-within:!bg-default/60", - "!cursor-text", - ], -}; - -const MyInput = forwardRef((props, ref) => { - const { - Component, - label, - domRef, - description, - isClearable, - startContent, - endContent, - shouldLabelBeOutside, - shouldLabelBeInside, - errorMessage, - getBaseProps, - getLabelProps, - getInputProps, - getInnerWrapperProps, - getInputWrapperProps, - getDescriptionProps, - getErrorMessageProps, - getClearButtonProps, - } = useInput({ - ...props, - ref, - // this is just for the example, the props bellow should be passed by the parent component - label: "Search", - type: "search", - placeholder: "Type to search...", - startContent: ( - - ), - // custom styles - classNames: { - ...styles, - }, - }); - - const labelContent = ; - - const end = React.useMemo(() => { - if (isClearable) { - return {endContent || }; - } - - return endContent; - }, [isClearable, getClearButtonProps]); - - const innerWrapper = React.useMemo(() => { - if (startContent || end) { - return ( -
    - {startContent} - - {end} -
    - ); - } - - return ; - }, [startContent, end, getInputProps, getInnerWrapperProps]); - - return ( -
    - - {shouldLabelBeOutside ? labelContent : null} -
    { - domRef.current?.focus(); - }} - > - {shouldLabelBeInside ? labelContent : null} - {innerWrapper} -
    - {description &&
    {description}
    } - {errorMessage &&
    {errorMessage}
    } -     -
    - ); -}); - -MyInput.displayName = "MyInput"; - -export default MyInput;`; +import App from "./custom-impl.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, - "/CloseFilledIcon.jsx": CloseFilledIcon, }; export default { diff --git a/apps/docs/content/components/input/custom-styles.raw.jsx b/apps/docs/content/components/input/custom-styles.raw.jsx new file mode 100644 index 000000000..98c11c99b --- /dev/null +++ b/apps/docs/content/components/input/custom-styles.raw.jsx @@ -0,0 +1,68 @@ +import {Input} from "@nextui-org/react"; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
    + + } + /> +
    + ); +} diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts index 3908b1756..da3ea9093 100644 --- a/apps/docs/content/components/input/custom-styles.ts +++ b/apps/docs/content/components/input/custom-styles.ts @@ -1,74 +1,7 @@ -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const App = `import {Input} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; - -export default function App() { - return ( -
    - - } - /> -
    - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, }; export default { diff --git a/apps/docs/content/components/input/description.raw.jsx b/apps/docs/content/components/input/description.raw.jsx new file mode 100644 index 000000000..3362ef3dc --- /dev/null +++ b/apps/docs/content/components/input/description.raw.jsx @@ -0,0 +1,13 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/description.ts b/apps/docs/content/components/input/description.ts index 8a286b369..aeb6340b6 100644 --- a/apps/docs/content/components/input/description.ts +++ b/apps/docs/content/components/input/description.ts @@ -1,16 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/disabled.raw.jsx b/apps/docs/content/components/input/disabled.raw.jsx new file mode 100644 index 000000000..6ed57cee8 --- /dev/null +++ b/apps/docs/content/components/input/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/disabled.ts b/apps/docs/content/components/input/disabled.ts index f3122337c..1a215cc91 100644 --- a/apps/docs/content/components/input/disabled.ts +++ b/apps/docs/content/components/input/disabled.ts @@ -1,16 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/error-message.raw.jsx b/apps/docs/content/components/input/error-message.raw.jsx new file mode 100644 index 000000000..d8f0f19f5 --- /dev/null +++ b/apps/docs/content/components/input/error-message.raw.jsx @@ -0,0 +1,15 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/error-message.ts b/apps/docs/content/components/input/error-message.ts index 8ed295e65..fb8101b13 100644 --- a/apps/docs/content/components/input/error-message.ts +++ b/apps/docs/content/components/input/error-message.ts @@ -1,18 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/label-placements.raw.jsx b/apps/docs/content/components/input/label-placements.raw.jsx new file mode 100644 index 000000000..01c669266 --- /dev/null +++ b/apps/docs/content/components/input/label-placements.raw.jsx @@ -0,0 +1,39 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
    +
    +

    Without placeholder

    +
    + {placements.map((placement) => ( + + ))} +
    +
    +
    +

    With placeholder

    +
    + {placements.map((placement) => ( + + ))} +
    +
    +
    + ); +} diff --git a/apps/docs/content/components/input/label-placements.ts b/apps/docs/content/components/input/label-placements.ts index f37fc6cf7..cd2a65d35 100644 --- a/apps/docs/content/components/input/label-placements.ts +++ b/apps/docs/content/components/input/label-placements.ts @@ -1,46 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
    -
    -

    Without placeholder

    -
    - {placements.map((placement) => ( - - ))} -
    -
    -
    -

    With placeholder

    -
    - {placements.map((placement) => ( - - ))} -
    -
    -
    - ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx new file mode 100644 index 000000000..e8aa0025c --- /dev/null +++ b/apps/docs/content/components/input/password.raw.jsx @@ -0,0 +1,91 @@ +import {Input} from "@nextui-org/react"; + +export const EyeSlashFilledIcon = (props) => { + return ( + + ); +}; + +export const EyeFilledIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [isVisible, setIsVisible] = React.useState(false); + + const toggleVisibility = () => setIsVisible(!isVisible); + + return ( + + {isVisible ? ( + + ) : ( + + )} + + } + label="Password" + placeholder="Enter your password" + type={isVisible ? "text" : "password"} + variant="bordered" + /> + ); +} diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts index 02822deb7..7751eaf93 100644 --- a/apps/docs/content/components/input/password.ts +++ b/apps/docs/content/components/input/password.ts @@ -1,92 +1,7 @@ -const EyeSlashFilledIcon = `export const EyeSlashFilledIcon = (props) => ( - -);`; - -const EyeFilledIcon = `export const EyeFilledIcon = (props) => ( - -);`; - -const App = `import {Input} from "@nextui-org/react"; -import {EyeFilledIcon} from "./EyeFilledIcon"; -import {EyeSlashFilledIcon} from "./EyeSlashFilledIcon"; - -export default function App() { - const [isVisible, setIsVisible] = React.useState(false); - - const toggleVisibility = () => setIsVisible(!isVisible); - - return ( - - {isVisible ? ( - - ) : ( - - )} - - } - type={isVisible ? "text" : "password"} - className="max-w-xs" - /> - ); -}`; +import App from "./password.raw.jsx?raw"; const react = { "/App.jsx": App, - "/EyeSlashFilledIcon.jsx": EyeSlashFilledIcon, - "/EyeFilledIcon.jsx": EyeFilledIcon, }; export default { diff --git a/apps/docs/content/components/input/radius.raw.jsx b/apps/docs/content/components/input/radius.raw.jsx new file mode 100644 index 000000000..cf85ff22f --- /dev/null +++ b/apps/docs/content/components/input/radius.raw.jsx @@ -0,0 +1,21 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
    + {radius.map((r) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/input/radius.ts b/apps/docs/content/components/input/radius.ts index 13eaba44b..7b78db1ce 100644 --- a/apps/docs/content/components/input/radius.ts +++ b/apps/docs/content/components/input/radius.ts @@ -1,30 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const radius = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
    - {radius.map((r) => ( - - ))} -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/readonly.raw.jsx b/apps/docs/content/components/input/readonly.raw.jsx new file mode 100644 index 000000000..50cb471de --- /dev/null +++ b/apps/docs/content/components/input/readonly.raw.jsx @@ -0,0 +1,14 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/readonly.ts b/apps/docs/content/components/input/readonly.ts index 7e9bf99da..fabd05ba3 100644 --- a/apps/docs/content/components/input/readonly.ts +++ b/apps/docs/content/components/input/readonly.ts @@ -1,17 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/regex-validation.raw.jsx b/apps/docs/content/components/input/regex-validation.raw.jsx new file mode 100644 index 000000000..64e06b69c --- /dev/null +++ b/apps/docs/content/components/input/regex-validation.raw.jsx @@ -0,0 +1,27 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState("junior2nextui.org"); + + const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i); + + const isInvalid = React.useMemo(() => { + if (value === "") return false; + + return validateEmail(value) ? false : true; + }, [value]); + + return ( + + ); +} diff --git a/apps/docs/content/components/input/regex-validation.ts b/apps/docs/content/components/input/regex-validation.ts index 1eb62d8e2..395d689b1 100644 --- a/apps/docs/content/components/input/regex-validation.ts +++ b/apps/docs/content/components/input/regex-validation.ts @@ -1,30 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState("junior2nextui.org"); - - const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i); - - const isInvalid = React.useMemo(() => { - if (value === "") return false; - - return validateEmail(value) ? false : true; - }, [value]); - - return ( - - ); -}`; +import App from "./regex-validation.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/required.raw.jsx b/apps/docs/content/components/input/required.raw.jsx new file mode 100644 index 000000000..6e97f4494 --- /dev/null +++ b/apps/docs/content/components/input/required.raw.jsx @@ -0,0 +1,13 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/required.ts b/apps/docs/content/components/input/required.ts index 2af84c5b4..b50b781e6 100644 --- a/apps/docs/content/components/input/required.ts +++ b/apps/docs/content/components/input/required.ts @@ -1,16 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/sizes.raw.jsx b/apps/docs/content/components/input/sizes.raw.jsx new file mode 100644 index 000000000..01e44c76d --- /dev/null +++ b/apps/docs/content/components/input/sizes.raw.jsx @@ -0,0 +1,16 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( +
    + + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input/sizes.ts b/apps/docs/content/components/input/sizes.ts index 6294e756c..85a2f5b30 100644 --- a/apps/docs/content/components/input/sizes.ts +++ b/apps/docs/content/components/input/sizes.ts @@ -1,20 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - - const sizes = ["sm", "md", "lg"]; - - return ( -
    - {sizes.map((size) => ( -
    - - -
    - ))} -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/start-end-content.raw.jsx b/apps/docs/content/components/input/start-end-content.raw.jsx new file mode 100644 index 000000000..306c4f70b --- /dev/null +++ b/apps/docs/content/components/input/start-end-content.raw.jsx @@ -0,0 +1,152 @@ +import {Input} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
    +
    + + } + type="email" + /> + + $ +
    + } + type="number" + /> + + https:// +
    + } + type="url" + /> + +
    + + } + label="Email" + labelPlacement="outside" + placeholder="you@example.com" + type="email" + /> + + $ +
    + } + label="Price" + labelPlacement="outside" + placeholder="0.00" + type="number" + /> + + .org/ + + } + label="Website" + labelPlacement="outside" + placeholder="nextui" + type="url" + /> + +
    + + @gmail.com +
    + } + label="Email" + labelPlacement="outside" + placeholder="nextui" + startContent={ + + } + /> + + + + + } + label="Price" + labelPlacement="outside" + placeholder="0.00" + startContent={ +
    + $ +
    + } + type="number" + /> + + .org + + } + label="Website" + labelPlacement="outside" + placeholder="nextui" + startContent={ +
    + https:// +
    + } + type="url" + /> + + + ); +} diff --git a/apps/docs/content/components/input/start-end-content.ts b/apps/docs/content/components/input/start-end-content.ts index 767530eb9..e99c7e599 100644 --- a/apps/docs/content/components/input/start-end-content.ts +++ b/apps/docs/content/components/input/start-end-content.ts @@ -1,158 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -);`; - -const App = `import {Input} from "@nextui-org/react"; -import {MailIcon} from './MailIcon'; - -export default function App() { - return ( -
    -
    - - } - /> - - $ -
    - } - /> - - https:// -
    - } - /> - -
    - - } - /> - - $ -
    - } - /> - - .org/ - - } - /> - -
    - - } - endContent={ -
    - @gmail.com -
    - } - /> - - $ -
    - } - endContent={ -
    - - -
    - } - type="number" - /> - - https:// - - } - endContent={ -
    - .org -
    - } - /> - - - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, }; export default { diff --git a/apps/docs/content/components/input/usage.raw.jsx b/apps/docs/content/components/input/usage.raw.jsx new file mode 100644 index 000000000..3b7f143b5 --- /dev/null +++ b/apps/docs/content/components/input/usage.raw.jsx @@ -0,0 +1,10 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/input/usage.ts b/apps/docs/content/components/input/usage.ts index e2896cf87..1118304c3 100644 --- a/apps/docs/content/components/input/usage.ts +++ b/apps/docs/content/components/input/usage.ts @@ -1,13 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/variants.raw.jsx b/apps/docs/content/components/input/variants.raw.jsx new file mode 100644 index 000000000..bfe66708d --- /dev/null +++ b/apps/docs/content/components/input/variants.raw.jsx @@ -0,0 +1,16 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    + + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/input/variants.ts b/apps/docs/content/components/input/variants.ts index d8308fd58..ddea95fb2 100644 --- a/apps/docs/content/components/input/variants.ts +++ b/apps/docs/content/components/input/variants.ts @@ -1,19 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
    - {variants.map((variant) => ( -
    - - -
    - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/kbd/keys.raw.jsx b/apps/docs/content/components/kbd/keys.raw.jsx new file mode 100644 index 000000000..b1a656827 --- /dev/null +++ b/apps/docs/content/components/kbd/keys.raw.jsx @@ -0,0 +1,11 @@ +import {Kbd} from "@nextui-org/react"; + +export default function App() { + return ( +
    + K + N + P +
    + ); +} diff --git a/apps/docs/content/components/kbd/keys.ts b/apps/docs/content/components/kbd/keys.ts index e4f45fd71..34b886143 100644 --- a/apps/docs/content/components/kbd/keys.ts +++ b/apps/docs/content/components/kbd/keys.ts @@ -1,14 +1,4 @@ -const App = `import {Kbd} from "@nextui-org/react"; - -export default function App() { - return ( -
    - K - N - P -
    - ); -}`; +import App from "./keys.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/kbd/usage.raw.jsx b/apps/docs/content/components/kbd/usage.raw.jsx new file mode 100644 index 000000000..2195959b2 --- /dev/null +++ b/apps/docs/content/components/kbd/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Kbd} from "@nextui-org/react"; + +export default function App() { + return K; +} diff --git a/apps/docs/content/components/kbd/usage.ts b/apps/docs/content/components/kbd/usage.ts index 11fd11aba..1118304c3 100644 --- a/apps/docs/content/components/kbd/usage.ts +++ b/apps/docs/content/components/kbd/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Kbd} from "@nextui-org/react"; - -export default function App() { - return ( - K - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/block.raw.jsx b/apps/docs/content/components/link/block.raw.jsx new file mode 100644 index 000000000..d8f5a60f1 --- /dev/null +++ b/apps/docs/content/components/link/block.raw.jsx @@ -0,0 +1,26 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Foreground + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
    + ); +} diff --git a/apps/docs/content/components/link/block.ts b/apps/docs/content/components/link/block.ts index b7ee134ec..7262af3b6 100644 --- a/apps/docs/content/components/link/block.ts +++ b/apps/docs/content/components/link/block.ts @@ -1,29 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - Foreground - - - Primary - - - Secondary - - - Success - - - Warning - - - Danger - -
    - ); -}`; +import App from "./block.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/colors.raw.jsx b/apps/docs/content/components/link/colors.raw.jsx new file mode 100644 index 000000000..66192e6a9 --- /dev/null +++ b/apps/docs/content/components/link/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Foreground + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
    + ); +} diff --git a/apps/docs/content/components/link/colors.ts b/apps/docs/content/components/link/colors.ts index 99a84bf23..d5bef810a 100644 --- a/apps/docs/content/components/link/colors.ts +++ b/apps/docs/content/components/link/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Foreground - Primary - Secondary - Success - Warning - Danger -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/custom-anchor-icon.raw.jsx b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx new file mode 100644 index 000000000..889255239 --- /dev/null +++ b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx @@ -0,0 +1,37 @@ +import {Link} from "@nextui-org/react"; + +export const AnchorIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + } + href="https://github.com/nextui-org/nextui" + > + Custom Icon + + ); +} diff --git a/apps/docs/content/components/link/custom-anchor-icon.ts b/apps/docs/content/components/link/custom-anchor-icon.ts index ca70aee5a..6d105abc2 100644 --- a/apps/docs/content/components/link/custom-anchor-icon.ts +++ b/apps/docs/content/components/link/custom-anchor-icon.ts @@ -1,43 +1,7 @@ -const AnchorIcon = `export const AnchorIcon = (props) => ( - -);`; - -const App = `import {Link} from "@nextui-org/react"; -import {AnchorIcon} from "./AnchorIcon"; - -export default function App() { - return ( - } - > - Custom Icon - - ); -}`; +import App from "./custom-anchor-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AnchorIcon.jsx": AnchorIcon, }; export default { diff --git a/apps/docs/content/components/link/custom-impl.raw.jsx b/apps/docs/content/components/link/custom-impl.raw.jsx new file mode 100644 index 000000000..bfadf4d60 --- /dev/null +++ b/apps/docs/content/components/link/custom-impl.raw.jsx @@ -0,0 +1,30 @@ +import {forwardRef} from "react"; +import {LinkIcon} from "@nextui-org/shared-icons"; +import {linkAnchorClasses} from "@nextui-org/theme"; +import {useLink} from "@nextui-org/react"; + +const MyLink = forwardRef((props, ref) => { + const { + Component, + children, + showAnchorIcon, + anchorIcon = , + getLinkProps, + } = useLink({ + ...props, + ref, + }); + + return ( + + <> + {children} + {showAnchorIcon && anchorIcon} + + + ); +}); + +MyLink.displayName = "MyLink"; + +export default MyLink; diff --git a/apps/docs/content/components/link/custom-impl.raw.tsx b/apps/docs/content/components/link/custom-impl.raw.tsx new file mode 100644 index 000000000..c4cd0ba56 --- /dev/null +++ b/apps/docs/content/components/link/custom-impl.raw.tsx @@ -0,0 +1,32 @@ +import React, {forwardRef} from "react"; +import {LinkIcon} from "@nextui-org/shared-icons"; +import {linkAnchorClasses} from "@nextui-org/theme"; +import {LinkProps, useLink} from "@nextui-org/react"; + +export interface MyLinkProps extends LinkProps {} + +const MyLink = forwardRef((props, ref) => { + const { + Component, + children, + showAnchorIcon, + anchorIcon = , + getLinkProps, + } = useLink({ + ...props, + ref, + }); + + return ( + + <> + {children} + {showAnchorIcon && anchorIcon} + + + ); +}); + +MyLink.displayName = "MyLink"; + +export default MyLink; diff --git a/apps/docs/content/components/link/custom-impl.ts b/apps/docs/content/components/link/custom-impl.ts index 9c1a72017..ef0d8ef53 100644 --- a/apps/docs/content/components/link/custom-impl.ts +++ b/apps/docs/content/components/link/custom-impl.ts @@ -1,68 +1,5 @@ -const App = `import {forwardRef} from "react"; -import {LinkIcon} from "@nextui-org/shared-icons"; -import {linkAnchorClasses} from "@nextui-org/theme"; - -import {useLink} from "@nextui-org/react"; - -const MyLink = forwardRef((props, ref) => { - const { - Component, - children, - showAnchorIcon, - anchorIcon = , - getLinkProps, - } = useLink({ - ...props, - ref, - }); - - return ( - - <> - {children} - {showAnchorIcon && anchorIcon} - - - ); -}); - -MyLink.displayName = "MyLink"; - -export default MyLink;`; - -const AppTs = `import {forwardRef} from "react"; -import {LinkIcon} from "@nextui-org/shared-icons"; -import {linkAnchorClasses} from "@nextui-org/theme"; - -import {LinkProps, useLink} from "@nextui-org/react"; - -export interface MyLinkProps extends LinkProps {} - -const MyLink = forwardRef((props, ref) => { - const { - Component, - children, - showAnchorIcon, - anchorIcon = , - getLinkProps, - } = useLink({ - ...props, - ref, - }); - - return ( - - <> - {children} - {showAnchorIcon && anchorIcon} - - - ); -}); - -MyLink.displayName = "MyLink"; - -export default MyLink;`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/disabled.raw.jsx b/apps/docs/content/components/link/disabled.raw.jsx new file mode 100644 index 000000000..28ab3b52b --- /dev/null +++ b/apps/docs/content/components/link/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( + + Disabled Link + + ); +} diff --git a/apps/docs/content/components/link/disabled.ts b/apps/docs/content/components/link/disabled.ts index a4db371fb..1a215cc91 100644 --- a/apps/docs/content/components/link/disabled.ts +++ b/apps/docs/content/components/link/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( - Disabled Link - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/external.raw.jsx b/apps/docs/content/components/link/external.raw.jsx new file mode 100644 index 000000000..63d17130c --- /dev/null +++ b/apps/docs/content/components/link/external.raw.jsx @@ -0,0 +1,14 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + External Link + + + External Link Anchor + +
    + ); +} diff --git a/apps/docs/content/components/link/external.ts b/apps/docs/content/components/link/external.ts index b59e78c17..ad0973aa0 100644 --- a/apps/docs/content/components/link/external.ts +++ b/apps/docs/content/components/link/external.ts @@ -1,21 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - External Link - - - External Link Anchor - -
    - ); -}`; +import App from "./external.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/nextjs.raw.jsx b/apps/docs/content/components/link/nextjs.raw.jsx new file mode 100644 index 000000000..38e7674e6 --- /dev/null +++ b/apps/docs/content/components/link/nextjs.raw.jsx @@ -0,0 +1,10 @@ +import {Link} from "@nextui-org/react"; +import NextLink from "next/link"; + +export default function App() { + return ( + + Next.js Link + + ); +} diff --git a/apps/docs/content/components/link/nextjs.ts b/apps/docs/content/components/link/nextjs.ts index 77f0e808a..1d6919663 100644 --- a/apps/docs/content/components/link/nextjs.ts +++ b/apps/docs/content/components/link/nextjs.ts @@ -1,13 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; -import NextLink from "next/link"; - -export default function App() { - return ( - - Next.js Link - - ); -}`; +import App from "./nextjs.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/polymorphic.raw.jsx b/apps/docs/content/components/link/polymorphic.raw.jsx new file mode 100644 index 000000000..52e8f3bd8 --- /dev/null +++ b/apps/docs/content/components/link/polymorphic.raw.jsx @@ -0,0 +1,15 @@ +import {Link, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/link/polymorphic.ts b/apps/docs/content/components/link/polymorphic.ts index 10c04b327..5722a6ee4 100644 --- a/apps/docs/content/components/link/polymorphic.ts +++ b/apps/docs/content/components/link/polymorphic.ts @@ -1,18 +1,4 @@ -const App = `import { Link, Button } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./polymorphic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/sizes.raw.jsx b/apps/docs/content/components/link/sizes.raw.jsx new file mode 100644 index 000000000..2230bd911 --- /dev/null +++ b/apps/docs/content/components/link/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Small + + + Medium + + + Large + +
    + ); +} diff --git a/apps/docs/content/components/link/sizes.ts b/apps/docs/content/components/link/sizes.ts index 63df519ed..85a2f5b30 100644 --- a/apps/docs/content/components/link/sizes.ts +++ b/apps/docs/content/components/link/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Small - Medium - Large -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/underline.raw.jsx b/apps/docs/content/components/link/underline.raw.jsx new file mode 100644 index 000000000..456a63929 --- /dev/null +++ b/apps/docs/content/components/link/underline.raw.jsx @@ -0,0 +1,23 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + None + + + Hover + + + Always + + + Active + + + Focus + +
    + ); +} diff --git a/apps/docs/content/components/link/underline.ts b/apps/docs/content/components/link/underline.ts index 78e0d7b87..0d7eb45ee 100644 --- a/apps/docs/content/components/link/underline.ts +++ b/apps/docs/content/components/link/underline.ts @@ -1,16 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
    - None - Hover - Always - Active - Focus -
    - ); -}`; +import App from "./underline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/usage.raw.jsx b/apps/docs/content/components/link/usage.raw.jsx new file mode 100644 index 000000000..4418696de --- /dev/null +++ b/apps/docs/content/components/link/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return Default Link; +} diff --git a/apps/docs/content/components/link/usage.ts b/apps/docs/content/components/link/usage.ts index bcd07ac92..1118304c3 100644 --- a/apps/docs/content/components/link/usage.ts +++ b/apps/docs/content/components/link/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( - Default Link - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/listbox/custom-styles.raw.jsx b/apps/docs/content/components/listbox/custom-styles.raw.jsx new file mode 100644 index 000000000..fc90e0f63 --- /dev/null +++ b/apps/docs/content/components/listbox/custom-styles.raw.jsx @@ -0,0 +1,269 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const BugIcon = (props) => { + return ( + + + + ); +}; + +export const PullRequestIcon = (props) => { + return ( + + + + ); +}; + +export const ChatIcon = (props) => { + return ( + + + + + ); +}; + +export const PlayCircleIcon = (props) => { + return ( + + + + + ); +}; + +export const LayoutIcon = (props) => { + return ( + + + + ); +}; + +export const TagIcon = (props) => { + return ( + + + + + ); +}; + +export const UsersIcon = (props) => { + return ( + + + + + ); +}; + +export const WatchersIcon = (props) => { + return ( + + + + ); +}; + +export const BookIcon = (props) => { + return ( + + + + + ); +}; + +export const ChevronRightIcon = (props) => { + return ( + + ); +}; + +export const IconWrapper = ({children, className}) => ( +
    + {children} +
    +); + +export const ItemCounter = ({number}) => ( +
    + {number} + +
    +); + +export default function App() { + return ( + alert(key)} + > + } + startContent={ + + + + } + > + Issues + + } + startContent={ + + + + } + > + Pull Requests + + } + startContent={ + + + + } + > + Discussions + + } + startContent={ + + + + } + > + Actions + + } + startContent={ + + + + } + > + Projects + + } + startContent={ + + + + } + textValue="Releases" + > +
    + Releases +
    + @nextui-org/react@2.0.10 +
    + 49 minutes ago + Latest +
    +
    +
    +     + } + startContent={ + + + + } + > + Contributors + + } + startContent={ + + + + } + > + Watchers + + MIT} + startContent={ + + + + } + > + License + +     + ); +} diff --git a/apps/docs/content/components/listbox/custom-styles.ts b/apps/docs/content/components/listbox/custom-styles.ts index 1a29e8b68..da3ea9093 100644 --- a/apps/docs/content/components/listbox/custom-styles.ts +++ b/apps/docs/content/components/listbox/custom-styles.ts @@ -1,282 +1,7 @@ -const BugIcon = `export const BugIcon = (props) => ( - - - -); -`; - -const PullRequestIcon = `export const PullRequestIcon = (props) => ( - - - -);`; - -const ChatIcon = `export const ChatIcon = (props) => ( - - - - -);`; - -const PlayCircleIcon = `export const PlayCircleIcon = (props) => ( - - - - -);`; - -const LayoutIcon = `export const LayoutIcon = (props) => ( - - - -);`; - -const TagIcon = `export const TagIcon = (props) => ( - - - - -);`; - -const UsersIcon = `export const UsersIcon = (props) => ( - - - - -);`; - -const WatchersIcon = `export const WatchersIcon = (props) => ( - - - -);`; - -const BookIcon = `export const BookIcon = (props) => ( - - - - -);`; - -const ChevronRightIcon = `export const ChevronRightIcon = (props) => ( - -);`; - -const IconWrapper = `import {cn} from "@nextui-org/react"; - -export const IconWrapper = ({children, className}) => ( -
    - {children} -
    -);`; - -const ItemCounter = `export const ItemCounter = ({number}) => ( -
    - {number} - -
    -);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {IconWrapper} from "./IconWrapper"; -import {ItemCounter} from "./ItemCounter"; -import {BugIcon} from "./BugIcon"; -import {PullRequestIcon} from "./PullRequestIcon"; -import {ChatIcon} from "./ChatIcon"; -import {PlayCircleIcon} from "./PlayCircleIcon"; -import {LayoutIcon} from "./LayoutIcon"; -import {TagIcon} from "./TagIcon"; -import {UsersIcon} from "./UsersIcon"; -import {WatchersIcon} from "./WatchersIcon"; -import {BookIcon} from "./BookIcon"; -import {ChevronRightIcon} from "./ChevronRightIcon"; - -export default function App() { - return ( - alert(key)} - className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium" - itemClasses={{ - base: "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80", - }} - > - } - startContent={ - - - - } - > - Issues - - } - startContent={ - - - - } - > - Pull Requests - - } - startContent={ - - - - } - > - Discussions - - } - startContent={ - - - - } - > - Actions - - } - startContent={ - - - - } - > - Projects - - } - startContent={ - - - - } - textValue="Releases" - > -
    - Releases -
    - @nextui-org/react@2.0.10 -
    - 49 minutes ago - Latest -
    -
    -
    -     - } - startContent={ - - - - } - > - Contributors - - } - startContent={ - - - - } - > - Watchers - - MIT} - startContent={ - - - - } - > - License - -     - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/IconWrapper.jsx": IconWrapper, - "/ItemCounter.jsx": ItemCounter, - "/BugIcon.jsx": BugIcon, - "/PullRequestIcon.jsx": PullRequestIcon, - "/ChatIcon.jsx": ChatIcon, - "/PlayCircleIcon.jsx": PlayCircleIcon, - "/LayoutIcon.jsx": LayoutIcon, - "/TagIcon.jsx": TagIcon, - "/UsersIcon.jsx": UsersIcon, - "/WatchersIcon.jsx": WatchersIcon, - "/BookIcon.jsx": BookIcon, - "/ChevronRightIcon.jsx": ChevronRightIcon, }; export default { diff --git a/apps/docs/content/components/listbox/description.raw.jsx b/apps/docs/content/components/listbox/description.raw.jsx new file mode 100644 index 000000000..3f6890651 --- /dev/null +++ b/apps/docs/content/components/listbox/description.raw.jsx @@ -0,0 +1,159 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/description.ts b/apps/docs/content/components/listbox/description.ts index 62a21c446..aeb6340b6 100644 --- a/apps/docs/content/components/listbox/description.ts +++ b/apps/docs/content/components/listbox/description.ts @@ -1,167 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/listbox/disabled-keys.raw.jsx b/apps/docs/content/components/listbox/disabled-keys.raw.jsx new file mode 100644 index 000000000..7b76cfa74 --- /dev/null +++ b/apps/docs/content/components/listbox/disabled-keys.raw.jsx @@ -0,0 +1,26 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + return ( + + alert(key)} + > + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/disabled-keys.ts b/apps/docs/content/components/listbox/disabled-keys.ts index 09e5aec23..b179b7cb7 100644 --- a/apps/docs/content/components/listbox/disabled-keys.ts +++ b/apps/docs/content/components/listbox/disabled-keys.ts @@ -1,34 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - return ( - - alert(key)} - > - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./disabled-keys.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/dynamic.raw.jsx b/apps/docs/content/components/listbox/dynamic.raw.jsx new file mode 100644 index 000000000..2f1551299 --- /dev/null +++ b/apps/docs/content/components/listbox/dynamic.raw.jsx @@ -0,0 +1,44 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const items = [ + { + key: "new", + label: "New file", + }, + { + key: "copy", + label: "Copy link", + }, + { + key: "edit", + label: "Edit file", + }, + { + key: "delete", + label: "Delete file", + }, + ]; + + return ( + + alert(key)}> + {(item) => ( + + {item.label} + + )} + + + ); +} diff --git a/apps/docs/content/components/listbox/dynamic.ts b/apps/docs/content/components/listbox/dynamic.ts index c5b598c0a..5d3c97bb9 100644 --- a/apps/docs/content/components/listbox/dynamic.ts +++ b/apps/docs/content/components/listbox/dynamic.ts @@ -1,56 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const items = [ - { - key: "new", - label: "New file", - }, - { - key: "copy", - label: "Copy link", - }, - { - key: "edit", - label: "Edit file", - }, - { - key: "delete", - label: "Delete file", - } - ]; - - return ( - - alert(key)} - > - {(item) => ( - - {item.label} - - )} - - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/icons.raw.jsx b/apps/docs/content/components/listbox/icons.raw.jsx new file mode 100644 index 000000000..54d3acdc4 --- /dev/null +++ b/apps/docs/content/components/listbox/icons.raw.jsx @@ -0,0 +1,149 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + }> + New file + + }> + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/icons.ts b/apps/docs/content/components/listbox/icons.ts index 1349f4e1e..22a410c88 100644 --- a/apps/docs/content/components/listbox/icons.ts +++ b/apps/docs/content/components/listbox/icons.ts @@ -1,163 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/listbox/multiple-selection.raw.jsx b/apps/docs/content/components/listbox/multiple-selection.raw.jsx new file mode 100644 index 000000000..e7c81351f --- /dev/null +++ b/apps/docs/content/components/listbox/multiple-selection.raw.jsx @@ -0,0 +1,35 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]); + + return ( +
    + + + Text + Number + Date + Single Date + Iteration + + +

    Selected value: {selectedValue}

    +
    + ); +} diff --git a/apps/docs/content/components/listbox/multiple-selection.ts b/apps/docs/content/components/listbox/multiple-selection.ts index 9bb63acdb..f03bb84fb 100644 --- a/apps/docs/content/components/listbox/multiple-selection.ts +++ b/apps/docs/content/components/listbox/multiple-selection.ts @@ -1,46 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", "), - [selectedKeys] - ); - - return ( -
    - - - Text - Number - Date - Single Date - Iteration - - -

    Selected value: {selectedValue}

    -
    - ); -}`; +import App from "./multiple-selection.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/sections.raw.jsx b/apps/docs/content/components/listbox/sections.raw.jsx new file mode 100644 index 000000000..5f2e1b6ec --- /dev/null +++ b/apps/docs/content/components/listbox/sections.raw.jsx @@ -0,0 +1,162 @@ +import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + + + } + > + Delete file + + + + + ); +} diff --git a/apps/docs/content/components/listbox/sections.ts b/apps/docs/content/components/listbox/sections.ts index 7f8f20443..17cd360ea 100644 --- a/apps/docs/content/components/listbox/sections.ts +++ b/apps/docs/content/components/listbox/sections.ts @@ -1,170 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - - - } - > - Delete file - - - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/listbox/single-selection.raw.jsx b/apps/docs/content/components/listbox/single-selection.raw.jsx new file mode 100644 index 000000000..86a04a477 --- /dev/null +++ b/apps/docs/content/components/listbox/single-selection.raw.jsx @@ -0,0 +1,34 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]); + + return ( +
    + + + Text + Number + Date + Single Date + Iteration + + +

    Selected value: {selectedValue}

    +
    + ); +} diff --git a/apps/docs/content/components/listbox/single-selection.ts b/apps/docs/content/components/listbox/single-selection.ts index 343f90df0..65d8454ff 100644 --- a/apps/docs/content/components/listbox/single-selection.ts +++ b/apps/docs/content/components/listbox/single-selection.ts @@ -1,46 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", "), - [selectedKeys] - ); - - return ( -
    - - - Text - Number - Date - Single Date - Iteration - - -

    Selected value: {selectedValue}

    -
    - ); -}`; +import App from "./single-selection.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/top-content.raw.jsx b/apps/docs/content/components/listbox/top-content.raw.jsx new file mode 100644 index 000000000..3e652b8ef --- /dev/null +++ b/apps/docs/content/components/listbox/top-content.raw.jsx @@ -0,0 +1,264 @@ +import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const [values, setValues] = React.useState(new Set(["1"])); + + const arrayValues = Array.from(values); + + const topContent = React.useMemo(() => { + if (!arrayValues.length) { + return null; + } + + return ( + + {arrayValues.map((value) => ( + {users.find((user) => `${user.id}` === `${value}`).name} + ))} + + ); + }, [arrayValues.length]); + + return ( + + + {(item) => ( + +
    + +
    + {item.name} + {item.email} +
    +
    +     + )} +     +     + ); +} diff --git a/apps/docs/content/components/listbox/top-content.raw.tsx b/apps/docs/content/components/listbox/top-content.raw.tsx new file mode 100644 index 000000000..284462f73 --- /dev/null +++ b/apps/docs/content/components/listbox/top-content.raw.tsx @@ -0,0 +1,267 @@ +import type {Selection} from "@react-types/shared"; + +import React from "react"; +import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export const ListboxWrapper = ({children}: {children: React.ReactNode}) => ( +
    + {children} +
    +); + +export default function App() { + const [values, setValues] = React.useState(new Set(["1"])); + + const arrayValues = Array.from(values); + + const topContent = React.useMemo(() => { + if (!arrayValues.length) { + return null; + } + + return ( + + {arrayValues.map((value) => ( + {users.find((user) => `${user.id}` === `${value}`)?.name} + ))} + + ); + }, [arrayValues.length]); + + return ( + + + {(item) => ( + +
    + +
    + {item.name} + {item.email} +
    +
    +     + )} +     +     + ); +} diff --git a/apps/docs/content/components/listbox/top-content.ts b/apps/docs/content/components/listbox/top-content.ts index fac030443..c9f1db104 100644 --- a/apps/docs/content/components/listbox/top-content.ts +++ b/apps/docs/content/components/listbox/top-content.ts @@ -1,344 +1,12 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const ListboxWrapperTs = `export const ListboxWrapper = ({children}: { children: React.ReactNode }) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {users} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["1"])); - - const arrayValues = Array.from(values); - - const topContent = React.useMemo(() => { - if (!arrayValues.length) { - return null; - } - - return ( - - {arrayValues.map((value) => ( - {users.find((user) => \`\${user.id}\` === \`\${value}\`).name} - ))} - - ); - }, [arrayValues.length]); - - return ( - - - {(item) => ( - -
    - -
    - {item.name} - {item.email} -
    -
    -     - )} -     -     - ); -}`; - -const AppTs = `import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar, Selection} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {users} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["1"])); - - const arrayValues = Array.from(values); - - const topContent = React.useMemo(() => { - if (!arrayValues.length) { - return null; - } - - return ( - - {arrayValues.map((value) => ( - {users.find((user) => \`\${user.id}\` === \`\${value}\`).name} - ))} - - ); - }, [arrayValues.length]); - - return ( - - - {(item) => ( - -
    - -
    - {item.name} - {item.email} -
    -
    -     - )} -     -     - ); -}`; +import App from "./top-content.raw.jsx?raw"; +import AppTs from "./top-content.raw.tsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/ListboxWrapper.tsx": ListboxWrapperTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/listbox/usage.raw.jsx b/apps/docs/content/components/listbox/usage.raw.jsx new file mode 100644 index 000000000..2726c45d8 --- /dev/null +++ b/apps/docs/content/components/listbox/usage.raw.jsx @@ -0,0 +1,22 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + return ( + + alert(key)}> + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/usage.ts b/apps/docs/content/components/listbox/usage.ts index 53bf3488a..1118304c3 100644 --- a/apps/docs/content/components/listbox/usage.ts +++ b/apps/docs/content/components/listbox/usage.ts @@ -1,33 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - return ( - - alert(key)} - > - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/variants.raw.jsx b/apps/docs/content/components/listbox/variants.raw.jsx new file mode 100644 index 000000000..17fef96b5 --- /dev/null +++ b/apps/docs/content/components/listbox/variants.raw.jsx @@ -0,0 +1,58 @@ +import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
    + {children} +
    +); + +export default function App() { + const [selectedVariant, setSelectedVariant] = React.useState("solid"); + const [selectedColor, setSelectedColor] = React.useState("default"); + + const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + + + New file + Copy link + Edit file + + Delete file + + + +
    + + {variants.map((variant) => ( + + {variant} + + ))} + + + {colors.map((color) => ( + + {color} + + ))} + +
    +
    + ); +} diff --git a/apps/docs/content/components/listbox/variants.ts b/apps/docs/content/components/listbox/variants.ts index 99a566944..ddea95fb2 100644 --- a/apps/docs/content/components/listbox/variants.ts +++ b/apps/docs/content/components/listbox/variants.ts @@ -1,70 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
    - {children} -
    -);`; - -const App = `import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const [selectedVariant, setSelectedVariant] = React.useState("solid") - const [selectedColor, setSelectedColor] = React.useState("default") - - const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; - const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - - return ( -
    - - - New file - Copy link - Edit file - - Delete file - - - -
    - - {variants.map((variant) => ( - - {variant} - - ))} - - - {colors.map((color) => ( - - {color} - - ))} - -
    -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/modal/backdrop.raw.jsx b/apps/docs/content/components/modal/backdrop.raw.jsx new file mode 100644 index 000000000..70beec009 --- /dev/null +++ b/apps/docs/content/components/modal/backdrop.raw.jsx @@ -0,0 +1,75 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onClose} = useDisclosure(); + const [backdrop, setBackdrop] = React.useState("opaque"); + + const backdrops = ["opaque", "blur", "transparent"]; + + const handleOpen = (backdrop) => { + setBackdrop(backdrop); + onOpen(); + }; + + return ( + <> +
    + {backdrops.map((b) => ( + + ))} +
    + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/backdrop.ts b/apps/docs/content/components/modal/backdrop.ts index b12764e89..53412b0f5 100644 --- a/apps/docs/content/components/modal/backdrop.ts +++ b/apps/docs/content/components/modal/backdrop.ts @@ -1,70 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onClose} = useDisclosure(); - const [backdrop, setBackdrop] = React.useState('opaque') - - const backdrops = ["opaque", "blur", "transparent"]; - - const handleOpen = (backdrop) => { - setBackdrop(backdrop) - onOpen(); - } - - return ( - <> -
    - {backdrops.map((b) => ( - - ))} -
    - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/custom-backdrop.raw.jsx b/apps/docs/content/components/modal/custom-backdrop.raw.jsx new file mode 100644 index 000000000..f4d0d3598 --- /dev/null +++ b/apps/docs/content/components/modal/custom-backdrop.raw.jsx @@ -0,0 +1,62 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/custom-backdrop.ts b/apps/docs/content/components/modal/custom-backdrop.ts index f66cceaaf..b1364484c 100644 --- a/apps/docs/content/components/modal/custom-backdrop.ts +++ b/apps/docs/content/components/modal/custom-backdrop.ts @@ -1,57 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./custom-backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/custom-motion.raw.jsx b/apps/docs/content/components/modal/custom-motion.raw.jsx new file mode 100644 index 000000000..a7ed2dd4a --- /dev/null +++ b/apps/docs/content/components/modal/custom-motion.raw.jsx @@ -0,0 +1,79 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/custom-motion.ts b/apps/docs/content/components/modal/custom-motion.ts index e57792729..389f462dd 100644 --- a/apps/docs/content/components/modal/custom-motion.ts +++ b/apps/docs/content/components/modal/custom-motion.ts @@ -1,74 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/custom-styles.raw.jsx b/apps/docs/content/components/modal/custom-styles.raw.jsx new file mode 100644 index 000000000..d58f5885f --- /dev/null +++ b/apps/docs/content/components/modal/custom-styles.raw.jsx @@ -0,0 +1,70 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/custom-styles.ts b/apps/docs/content/components/modal/custom-styles.ts index b2aca285d..da3ea9093 100644 --- a/apps/docs/content/components/modal/custom-styles.ts +++ b/apps/docs/content/components/modal/custom-styles.ts @@ -1,63 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/draggable-overflow.raw.jsx b/apps/docs/content/components/modal/draggable-overflow.raw.jsx new file mode 100644 index 000000000..dc428323b --- /dev/null +++ b/apps/docs/content/components/modal/draggable-overflow.raw.jsx @@ -0,0 +1,48 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + useDraggable, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const targetRef = React.useRef(null); + const {moveProps} = useDraggable({targetRef, canOverflow: true}); + + return ( + <> + + + + {(onClose) => ( + <> + + Modal Title + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/draggable-overflow.ts b/apps/docs/content/components/modal/draggable-overflow.ts index da7a442fd..86fe16fec 100644 --- a/apps/docs/content/components/modal/draggable-overflow.ts +++ b/apps/docs/content/components/modal/draggable-overflow.ts @@ -1,40 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, useDraggable} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const targetRef = React.useRef(null); - const {moveProps} = useDraggable({targetRef, canOverflow: true}); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./draggable-overflow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/draggable.raw.jsx b/apps/docs/content/components/modal/draggable.raw.jsx new file mode 100644 index 000000000..4cd170dfe --- /dev/null +++ b/apps/docs/content/components/modal/draggable.raw.jsx @@ -0,0 +1,48 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + useDraggable, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const targetRef = React.useRef(null); + const {moveProps} = useDraggable({targetRef}); + + return ( + <> + + + + {(onClose) => ( + <> + + Modal Title + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/draggable.ts b/apps/docs/content/components/modal/draggable.ts index a2dada19a..276b37d2b 100644 --- a/apps/docs/content/components/modal/draggable.ts +++ b/apps/docs/content/components/modal/draggable.ts @@ -1,40 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, useDraggable} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const targetRef = React.useRef(null); - const {moveProps} = useDraggable({ targetRef }); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./draggable.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/form.raw.jsx b/apps/docs/content/components/modal/form.raw.jsx new file mode 100644 index 000000000..07529d78a --- /dev/null +++ b/apps/docs/content/components/modal/form.raw.jsx @@ -0,0 +1,116 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + Checkbox, + Input, + Link, +} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export const LockIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Log in + + + } + label="Email" + placeholder="Enter your email" + variant="bordered" + /> + + } + label="Password" + placeholder="Enter your password" + type="password" + variant="bordered" + /> +
    + + Remember me + + + Forgot password? + +
    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/form.ts b/apps/docs/content/components/modal/form.ts index 576d5657e..c9bad48bd 100644 --- a/apps/docs/content/components/modal/form.ts +++ b/apps/docs/content/components/modal/form.ts @@ -1,115 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -); -`; - -const LockIcon = `export const LockIcon = (props) => ( - -);`; - -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Checkbox, Input, Link} from "@nextui-org/react"; -import {MailIcon} from './MailIcon.jsx'; -import {LockIcon} from './LockIcon.jsx'; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Log in - - - } - label="Email" - placeholder="Enter your email" - variant="bordered" - /> - - } - label="Password" - placeholder="Enter your password" - type="password" - variant="bordered" - /> -
    - - Remember me - - - Forgot password? - -
    -     - - - - - - )} -     -     - - ); -}`; +import App from "./form.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, - "/LockIcon.jsx": LockIcon, }; export default { diff --git a/apps/docs/content/components/modal/non-dismissable.raw.jsx b/apps/docs/content/components/modal/non-dismissable.raw.jsx new file mode 100644 index 000000000..64d29b31d --- /dev/null +++ b/apps/docs/content/components/modal/non-dismissable.raw.jsx @@ -0,0 +1,60 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/non-dismissable.ts b/apps/docs/content/components/modal/non-dismissable.ts index 5e84335ca..a1281cb23 100644 --- a/apps/docs/content/components/modal/non-dismissable.ts +++ b/apps/docs/content/components/modal/non-dismissable.ts @@ -1,50 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./non-dismissable.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/overflow.raw.jsx b/apps/docs/content/components/modal/overflow.raw.jsx new file mode 100644 index 000000000..69ff91e9c --- /dev/null +++ b/apps/docs/content/components/modal/overflow.raw.jsx @@ -0,0 +1,112 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = React.useState("inside"); + + return ( +
    + + + inside + outside + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit + dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis + sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod + et. Culpa deserunt nostrud ad veniam. +

    +

    + Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     +
    + ); +} diff --git a/apps/docs/content/components/modal/overflow.raw.tsx b/apps/docs/content/components/modal/overflow.raw.tsx new file mode 100644 index 000000000..866bd1c39 --- /dev/null +++ b/apps/docs/content/components/modal/overflow.raw.tsx @@ -0,0 +1,115 @@ +import React from "react"; +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + ModalProps, + Button, + useDisclosure, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = + React.useState("inside"); + + return ( +
    + + setScrollBehavior(v as ModalProps["scrollBehavior"])} + > + inside + outside + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit + dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis + sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod + et. Culpa deserunt nostrud ad veniam. +

    +

    + Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     +
    + ); +} diff --git a/apps/docs/content/components/modal/overflow.ts b/apps/docs/content/components/modal/overflow.ts index d9d3ba869..5276c45e7 100644 --- a/apps/docs/content/components/modal/overflow.ts +++ b/apps/docs/content/components/modal/overflow.ts @@ -1,244 +1,5 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [scrollBehavior, setScrollBehavior] = React.useState("inside"); - - return ( -
    - - - inside - outside - - - - {(onClose) => ( - <> - - Modal Title - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

    -     - - - - - - )} -     -     -
    - ); -}`; - -const AppTs = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalProps, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [scrollBehavior, setScrollBehavior] = React.useState("inside"); - - return ( -
    - - - inside - outside - - - - {(onClose) => ( - <> - - Modal Title - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

    -     - - - - - - )} -     -     -
    - ); -}`; +import App from "./overflow.raw.jsx?raw"; +import AppTs from "./overflow.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx new file mode 100644 index 000000000..a3ff752be --- /dev/null +++ b/apps/docs/content/components/modal/placement.raw.jsx @@ -0,0 +1,114 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + ModalProps, + Button, + useDisclosure, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = + React.useState < ModalProps["scrollBehavior"] > "inside"; + + return ( +
    + + + inside + outside + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit + dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis + sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod + et. Culpa deserunt nostrud ad veniam. +

    +

    + Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     +
    + ); +} diff --git a/apps/docs/content/components/modal/placement.ts b/apps/docs/content/components/modal/placement.ts index 626f888ee..eee224436 100644 --- a/apps/docs/content/components/modal/placement.ts +++ b/apps/docs/content/components/modal/placement.ts @@ -1,61 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [modalPlacement, setModalPlacement] = React.useState("auto"); - - return ( -
    - - - auto - top - bottom - center - top-center - bottom-center - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -     - - - - - - )} -     -     -
    - ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/sizes.raw.jsx b/apps/docs/content/components/modal/sizes.raw.jsx new file mode 100644 index 000000000..44857c148 --- /dev/null +++ b/apps/docs/content/components/modal/sizes.raw.jsx @@ -0,0 +1,67 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onClose} = useDisclosure(); + const [size, setSize] = React.useState("md"); + + const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; + + const handleOpen = (size) => { + setSize(size); + onOpen(); + }; + + return ( + <> +
    + {sizes.map((size) => ( + + ))} +
    + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/sizes.ts b/apps/docs/content/components/modal/sizes.ts index 53347ff38..85a2f5b30 100644 --- a/apps/docs/content/components/modal/sizes.ts +++ b/apps/docs/content/components/modal/sizes.ts @@ -1,65 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onClose} = useDisclosure(); - const [size, setSize] = React.useState('md') - - const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; - - - const handleOpen = (size) => { - setSize(size) - onOpen(); - } - - return ( - <> -
    - {sizes.map((size) => ( - - ))} -
    - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/usage.raw.jsx b/apps/docs/content/components/modal/usage.raw.jsx new file mode 100644 index 000000000..8c6bab9c6 --- /dev/null +++ b/apps/docs/content/components/modal/usage.raw.jsx @@ -0,0 +1,55 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

    +

    + Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +     + + + + + + )} +     +     + + ); +} diff --git a/apps/docs/content/components/modal/usage.ts b/apps/docs/content/components/modal/usage.ts index e0199aac0..1118304c3 100644 --- a/apps/docs/content/components/modal/usage.ts +++ b/apps/docs/content/components/modal/usage.ts @@ -1,50 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

    -

    - Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -     - - - - - - )} -     -     - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/navbar/bordered.raw.jsx b/apps/docs/content/components/navbar/bordered.raw.jsx new file mode 100644 index 000000000..0d9f45e99 --- /dev/null +++ b/apps/docs/content/components/navbar/bordered.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/bordered.ts b/apps/docs/content/components/navbar/bordered.ts index 131a1d1c4..4e025375c 100644 --- a/apps/docs/content/components/navbar/bordered.ts +++ b/apps/docs/content/components/navbar/bordered.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./bordered.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/controlled-menu.raw.jsx b/apps/docs/content/components/navbar/controlled-menu.raw.jsx new file mode 100644 index 000000000..129004d66 --- /dev/null +++ b/apps/docs/content/components/navbar/controlled-menu.raw.jsx @@ -0,0 +1,106 @@ +import { + Navbar, + NavbarBrand, + NavbarMenuToggle, + NavbarMenuItem, + NavbarMenu, + NavbarContent, + NavbarItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

    ACME

    +     +     + + + + +

    ACME

    +     + + + Features + + + + + Customers + + + + + Integrations + + +     + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + +     + ); +} diff --git a/apps/docs/content/components/navbar/controlled-menu.ts b/apps/docs/content/components/navbar/controlled-menu.ts index bac2a98e5..40facd8ed 100644 --- a/apps/docs/content/components/navbar/controlled-menu.ts +++ b/apps/docs/content/components/navbar/controlled-menu.ts @@ -1,106 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - - - - -

    ACME

    -     -     - - - - -

    ACME

    -     - - - Features - - - - - Customers - - - - - Integrations - - -     - - - - Login - - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - -     - ); -}`; +import App from "./controlled-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/custom-active-item.raw.jsx b/apps/docs/content/components/navbar/custom-active-item.raw.jsx new file mode 100644 index 000000000..b2f161709 --- /dev/null +++ b/apps/docs/content/components/navbar/custom-active-item.raw.jsx @@ -0,0 +1,69 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/custom-active-item.ts b/apps/docs/content/components/navbar/custom-active-item.ts index a56468839..f62f66c25 100644 --- a/apps/docs/content/components/navbar/custom-active-item.ts +++ b/apps/docs/content/components/navbar/custom-active-item.ts @@ -1,75 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./custom-active-item.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx new file mode 100644 index 000000000..858e00961 --- /dev/null +++ b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx @@ -0,0 +1,104 @@ +import { + Navbar, + NavbarBrand, + NavbarMenuToggle, + NavbarMenu, + NavbarMenuItem, + NavbarContent, + NavbarItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

    ACME

    +     +     + + + + +

    ACME

    +     + + + Features + + + + + Customers + + + + + Integrations + + +     + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + +     + ); +} diff --git a/apps/docs/content/components/navbar/disable-menu-animation.ts b/apps/docs/content/components/navbar/disable-menu-animation.ts index a0e038257..a485b0530 100644 --- a/apps/docs/content/components/navbar/disable-menu-animation.ts +++ b/apps/docs/content/components/navbar/disable-menu-animation.ts @@ -1,100 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - - - - -

    ACME

    -     -     - - - - -

    ACME

    -     - - - Features - - - - - Customers - - - - - Integrations - - -     - - - - Login - - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - -     - ); -}`; +import App from "./disable-menu-animation.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/disabled-blur.raw.jsx b/apps/docs/content/components/navbar/disabled-blur.raw.jsx new file mode 100644 index 000000000..c725d9db9 --- /dev/null +++ b/apps/docs/content/components/navbar/disabled-blur.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/disabled-blur.ts b/apps/docs/content/components/navbar/disabled-blur.ts index 8f9b04eb1..b3b786511 100644 --- a/apps/docs/content/components/navbar/disabled-blur.ts +++ b/apps/docs/content/components/navbar/disabled-blur.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./disabled-blur.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx new file mode 100644 index 000000000..3e76a1088 --- /dev/null +++ b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/hide-on-scroll.ts b/apps/docs/content/components/navbar/hide-on-scroll.ts index 4f2372e15..a160f6edf 100644 --- a/apps/docs/content/components/navbar/hide-on-scroll.ts +++ b/apps/docs/content/components/navbar/hide-on-scroll.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./hide-on-scroll.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/static.raw.jsx b/apps/docs/content/components/navbar/static.raw.jsx new file mode 100644 index 000000000..27eec0adb --- /dev/null +++ b/apps/docs/content/components/navbar/static.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/static.ts b/apps/docs/content/components/navbar/static.ts index 59177f7de..1b7a00893 100644 --- a/apps/docs/content/components/navbar/static.ts +++ b/apps/docs/content/components/navbar/static.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./static.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/usage.raw.jsx b/apps/docs/content/components/navbar/usage.raw.jsx new file mode 100644 index 000000000..1ec1d37c9 --- /dev/null +++ b/apps/docs/content/components/navbar/usage.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/usage.ts b/apps/docs/content/components/navbar/usage.ts index c651a56f7..1118304c3 100644 --- a/apps/docs/content/components/navbar/usage.ts +++ b/apps/docs/content/components/navbar/usage.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-avatar.raw.jsx b/apps/docs/content/components/navbar/with-avatar.raw.jsx new file mode 100644 index 000000000..ce2386a05 --- /dev/null +++ b/apps/docs/content/components/navbar/with-avatar.raw.jsx @@ -0,0 +1,85 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, + Avatar, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

    ACME

    +     + + + + + Features + + + + + Customers + + + + + Integrations + + + + + + + + + + + +

    Signed in as

    +

    zoey@example.com

    +     + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + +     +     +     +     + ); +} diff --git a/apps/docs/content/components/navbar/with-avatar.ts b/apps/docs/content/components/navbar/with-avatar.ts index c5e11c58c..17d3676da 100644 --- a/apps/docs/content/components/navbar/with-avatar.ts +++ b/apps/docs/content/components/navbar/with-avatar.ts @@ -1,80 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

    ACME

    -     - - - - - Features - - - - - Customers - - - - - Integrations - - - - - - - - - - - -

    Signed in as

    -

    zoey@example.com

    -     - My Settings - Team Settings - Analytics - System - Configurations - Help & Feedback - - Log Out - -     -     -     -     - ); -}`; +import App from "./with-avatar.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx new file mode 100644 index 000000000..8b0f82f75 --- /dev/null +++ b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx @@ -0,0 +1,320 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + Button, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export const ChevronDown = ({fill, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const Lock = ({fill, size, height, width, ...props}) => { + const color = fill; + + return ( + + + + + + + + ); +}; + +export const Activity = ({fill, size, height, width, ...props}) => { + return ( + + + + + + + + ); +}; + +export const Flash = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const Server = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const TagUser = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + ); +}; + +export const Scale = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + ); +}; + +export default function App() { + const icons = { + chevron: , + scale: , + lock: , + activity: , + flash: , + server: , + user: , + }; + + return ( + + + +

    ACME

    +     + + + + + + + + + + Autoscaling + + + Usage Metrics + + + Production Ready + + + +99% Uptime + + + +Supreme Support + + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + +     + ); +} diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.ts b/apps/docs/content/components/navbar/with-dropdown-menu.ts index 61b4a6a4f..e5badd5a9 100644 --- a/apps/docs/content/components/navbar/with-dropdown-menu.ts +++ b/apps/docs/content/components/navbar/with-dropdown-menu.ts @@ -1,342 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const Icons = `export const ChevronDown = ({fill, size, height, width, ...props}) => { - return ( - - - - ); -}; - -export const Lock = ({fill, size, height, width, ...props}) => { - const color = fill; - - return ( - - - - - - - - ); -}; - -export const Activity = ({fill, size, height, width, ...props}) => { - return ( - - - - - - - - ); -}; - -export const Flash = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - ); -}; - -export const Server = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - ); -}; - -export const TagUser = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - - ); -}; - - -export const Scale = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - - ); -};`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu} from "@nextui-org/react"; -import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "./Icons.jsx"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const icons = { - chevron: , - scale: , - lock: , - activity: , - flash: , - server: , - user: , - }; - - return ( - - - -

    ACME

    -     - - - - - - - - - - Autoscaling - - - Usage Metrics - - - Production Ready - - - +99% Uptime - - - +Supreme Support - - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - -     - ); -}`; +import App from "./with-dropdown-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, - "/Icons.jsx": Icons, }; export default { diff --git a/apps/docs/content/components/navbar/with-menu.raw.jsx b/apps/docs/content/components/navbar/with-menu.raw.jsx new file mode 100644 index 000000000..78320c99d --- /dev/null +++ b/apps/docs/content/components/navbar/with-menu.raw.jsx @@ -0,0 +1,100 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + NavbarMenuToggle, + NavbarMenu, + NavbarMenuItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + +

    ACME

    +     +     + + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + +     + ); +} diff --git a/apps/docs/content/components/navbar/with-menu.ts b/apps/docs/content/components/navbar/with-menu.ts index 776200796..be734be3c 100644 --- a/apps/docs/content/components/navbar/with-menu.ts +++ b/apps/docs/content/components/navbar/with-menu.ts @@ -1,96 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - -

    ACME

    -     -     - - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - -     - ); -}`; +import App from "./with-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-search-input.raw.jsx b/apps/docs/content/components/navbar/with-search-input.raw.jsx new file mode 100644 index 000000000..300f80cb5 --- /dev/null +++ b/apps/docs/content/components/navbar/with-search-input.raw.jsx @@ -0,0 +1,130 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + Input, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, + Avatar, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + +

    ACME

    +     + + + + Features + + + + + Customers + + + + + Integrations + + + +     + + + } + type="search" + /> + + + + + + +

    Signed in as

    +

    zoey@example.com

    +     + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + +     +     +     +     + ); +} diff --git a/apps/docs/content/components/navbar/with-search-input.ts b/apps/docs/content/components/navbar/with-search-input.ts index 871710ca6..88fc86bd2 100644 --- a/apps/docs/content/components/navbar/with-search-input.ts +++ b/apps/docs/content/components/navbar/with-search-input.ts @@ -1,130 +1,7 @@ -const SearchIcon = `export const SearchIcon = ({ - size = 24, - strokeWidth = 1.5, - width, - height, - ...props -}) => ( - -); -`; - -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Input, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; -import {SearchIcon} from "./SearchIcon.jsx"; - -export default function App() { - return ( - - - - -

    ACME

    -     - - - - Features - - - - - Customers - - - - - Integrations - - - -     - - - } - type="search" - /> - - - - - - -

    Signed in as

    -

    zoey@example.com

    -     - My Settings - Team Settings - Analytics - System - Configurations - Help & Feedback - - Log Out - -     -     -     -     - ); -}`; +import App from "./with-search-input.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, - "/SearchIcon.jsx": SearchIcon, }; export default { diff --git a/apps/docs/content/components/pagination/boundaries.raw.jsx b/apps/docs/content/components/pagination/boundaries.raw.jsx new file mode 100644 index 000000000..7c6e43670 --- /dev/null +++ b/apps/docs/content/components/pagination/boundaries.raw.jsx @@ -0,0 +1,14 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ( +
    +

    1 Boundary (default)

    + +

    2 Boundaries

    + +

    3 Boundaries

    + +
    + ); +} diff --git a/apps/docs/content/components/pagination/boundaries.ts b/apps/docs/content/components/pagination/boundaries.ts index 56b1ffe9e..e3b0fe395 100644 --- a/apps/docs/content/components/pagination/boundaries.ts +++ b/apps/docs/content/components/pagination/boundaries.ts @@ -1,28 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    -

    1 Boundary (default)

    - -

    2 Boundaries

    - -

    3 Boundaries

    - -
    - ); -}`; +import App from "./boundaries.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/colors.raw.jsx b/apps/docs/content/components/pagination/colors.raw.jsx new file mode 100644 index 000000000..bf5afca8c --- /dev/null +++ b/apps/docs/content/components/pagination/colors.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const colors = ["primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/pagination/colors.ts b/apps/docs/content/components/pagination/colors.ts index d2988d221..d5bef810a 100644 --- a/apps/docs/content/components/pagination/colors.ts +++ b/apps/docs/content/components/pagination/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const colors = ["primary", "secondary", "success", "warning", "danger"] - - return ( -
    - {colors.map((color) => ( - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/compact.raw.jsx b/apps/docs/content/components/pagination/compact.raw.jsx new file mode 100644 index 000000000..c0419e978 --- /dev/null +++ b/apps/docs/content/components/pagination/compact.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/compact.ts b/apps/docs/content/components/pagination/compact.ts index dff50103b..c3cdfc316 100644 --- a/apps/docs/content/components/pagination/compact.ts +++ b/apps/docs/content/components/pagination/compact.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./compact.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/controlled.raw.jsx b/apps/docs/content/components/pagination/controlled.raw.jsx new file mode 100644 index 000000000..6580d3b7f --- /dev/null +++ b/apps/docs/content/components/pagination/controlled.raw.jsx @@ -0,0 +1,30 @@ +import {Pagination, Button} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState(1); + + return ( +
    +

    Selected Page: {currentPage}

    + +
    + + +
    +
    + ); +} diff --git a/apps/docs/content/components/pagination/controlled.ts b/apps/docs/content/components/pagination/controlled.ts index 6b3c4d7c4..2c3f0cacb 100644 --- a/apps/docs/content/components/pagination/controlled.ts +++ b/apps/docs/content/components/pagination/controlled.ts @@ -1,38 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState(1); - - return ( -
    -

    Selected Page: {currentPage}

    - -
    - - -
    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/controls.raw.jsx b/apps/docs/content/components/pagination/controls.raw.jsx new file mode 100644 index 000000000..8b5909bba --- /dev/null +++ b/apps/docs/content/components/pagination/controls.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/controls.ts b/apps/docs/content/components/pagination/controls.ts index f8db1c165..74b340304 100644 --- a/apps/docs/content/components/pagination/controls.ts +++ b/apps/docs/content/components/pagination/controls.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./controls.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/custom-impl.raw.jsx b/apps/docs/content/components/pagination/custom-impl.raw.jsx new file mode 100644 index 000000000..aa3dedd16 --- /dev/null +++ b/apps/docs/content/components/pagination/custom-impl.raw.jsx @@ -0,0 +1,82 @@ +import {usePagination, PaginationItemType} from "@nextui-org/react"; + +export const ChevronIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {activePage, range, setPage, onNext, onPrevious} = usePagination({ + total: 6, + showControls: true, + siblings: 10, + boundaries: 10, + }); + + return ( +
    +

    Active page: {activePage}

    +
      + {range.map((page) => { + if (page === PaginationItemType.NEXT) { + return ( +
    • + +
      • + ); + } + + if (page === PaginationItemType.PREV) { + return ( +
    • + +
      • + ); + } + + if (page === PaginationItemType.DOTS) { + return ( +
    • + ... +
      • + ); + } + + return ( +
    • +
      • + ); + })} +
    +
    + ); +} diff --git a/apps/docs/content/components/pagination/custom-impl.ts b/apps/docs/content/components/pagination/custom-impl.ts index 72da8c761..ab37512ce 100644 --- a/apps/docs/content/components/pagination/custom-impl.ts +++ b/apps/docs/content/components/pagination/custom-impl.ts @@ -1,95 +1,7 @@ -const ChevronIcon = `export const ChevronIcon = (props) => ( - -); -`; - -const App = `import {usePagination, PaginationItemType} from "@nextui-org/react"; -import {ChevronIcon} from "./ChevronIcon"; - -export default function App() { - const {activePage, range, setPage, onNext, onPrevious} = usePagination({ - total: 6, - showControls: true, - siblings: 10, - boundaries: 10, - }); - - return ( -
    -

    Active page: {activePage}

    -
      - {range.map((page) => { - if (page === PaginationItemType.NEXT) { - return ( -
    • - -
      • - ); - } - - if (page === PaginationItemType.PREV) { - return ( -
    • - -
      • - ); - } - - if (page === PaginationItemType.DOTS) { - return ( -
    • - ... -
      • - ); - } - - return ( -
    • -
      • - ); - })} -
    -
    - ); -}`; +import App from "./custom-impl.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ChevronIcon.jsx": ChevronIcon, }; export default { diff --git a/apps/docs/content/components/pagination/custom-items.raw.jsx b/apps/docs/content/components/pagination/custom-items.raw.jsx new file mode 100644 index 000000000..d691f8eed --- /dev/null +++ b/apps/docs/content/components/pagination/custom-items.raw.jsx @@ -0,0 +1,88 @@ +import {Pagination, PaginationItemType} from "@nextui-org/react"; + +export const ChevronIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const renderItem = ({ref, key, value, isActive, onNext, onPrevious, setPage, className}) => { + if (value === PaginationItemType.NEXT) { + return ( + + ); + } + + if (value === PaginationItemType.PREV) { + return ( + + ); + } + + if (value === PaginationItemType.DOTS) { + return ( + + ); + } + + // cursor is the default item + return ( + + ); + }; + + return ( + + ); +} diff --git a/apps/docs/content/components/pagination/custom-items.raw.tsx b/apps/docs/content/components/pagination/custom-items.raw.tsx new file mode 100644 index 000000000..9756766c9 --- /dev/null +++ b/apps/docs/content/components/pagination/custom-items.raw.tsx @@ -0,0 +1,100 @@ +import React, {SVGProps} from "react"; +import {cn, Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react"; + +type IconSvgProps = SVGProps; + +export const ChevronIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export default function App() { + const renderItem = ({ + ref, + key, + value, + isActive, + onNext, + onPrevious, + setPage, + className, + }: PaginationItemRenderProps) => { + if (value === PaginationItemType.NEXT) { + return ( + + ); + } + + if (value === PaginationItemType.PREV) { + return ( + + ); + } + + if (value === PaginationItemType.DOTS) { + return ( + + ); + } + + // cursor is the default item + return ( + + ); + }; + + return ( + + ); +} diff --git a/apps/docs/content/components/pagination/custom-items.ts b/apps/docs/content/components/pagination/custom-items.ts index 3e94ff8c6..708622f44 100644 --- a/apps/docs/content/components/pagination/custom-items.ts +++ b/apps/docs/content/components/pagination/custom-items.ts @@ -1,189 +1,12 @@ -const ChevronIcon = `export const ChevronIcon = (props) => ( - -); -`; - -const ChevronIconTs = `import {SVGProps} from "react"; - -type IconSvgProps = SVGProps; - -export const ChevronIcon = (props: IconSvgProps) => ( - -); -`; - -const AppTs = `import {Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react"; -import {ChevronIcon} from "./ChevronIcon"; - -export default function App() { - const renderItem = ({ - ref, - key, - value, - isActive, - onNext, - onPrevious, - setPage, - className, - }: PaginationItemRenderProps) => { - if (value === PaginationItemType.NEXT) { - return ( - - ); - } - - if (value === PaginationItemType.PREV) { - return ( - - ); - } - - if (value === PaginationItemType.DOTS) { - return ; - } - - // cursor is the default item - return ( - - ); - }; - - return ( - - ); -}`; - -const App = `import {Pagination, PaginationItemType} from "@nextui-org/react"; -import {ChevronIcon} from "./ChevronIcon"; - -export default function App() { - const renderItem = ({ - ref, - key, - value, - isActive, - onNext, - onPrevious, - setPage, - className, - }) => { - if (value === PaginationItemType.NEXT) { - return ( - - ); - } - - if (value === PaginationItemType.PREV) { - return ( - - ); - } - - if (value === PaginationItemType.DOTS) { - return ; - } - - // cursor is the default item - return ( - - ); - }; - - return ( - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; +import AppTs from "./custom-items.raw.tsx?raw"; const react = { "/App.jsx": App, - "/ChevronIcon.jsx": ChevronIcon, }; const reactTs = { "/App.tsx": AppTs, - "/ChevronIcon.tsx": ChevronIconTs, }; export default { diff --git a/apps/docs/content/components/pagination/custom-styles.raw.jsx b/apps/docs/content/components/pagination/custom-styles.raw.jsx new file mode 100644 index 000000000..2438a31fe --- /dev/null +++ b/apps/docs/content/components/pagination/custom-styles.raw.jsx @@ -0,0 +1,15 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/pagination/custom-styles.ts b/apps/docs/content/components/pagination/custom-styles.ts index 099f57350..da3ea9093 100644 --- a/apps/docs/content/components/pagination/custom-styles.ts +++ b/apps/docs/content/components/pagination/custom-styles.ts @@ -1,18 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/disabled.raw.jsx b/apps/docs/content/components/pagination/disabled.raw.jsx new file mode 100644 index 000000000..0052b38f3 --- /dev/null +++ b/apps/docs/content/components/pagination/disabled.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/disabled.ts b/apps/docs/content/components/pagination/disabled.ts index 8e541c5ad..1a215cc91 100644 --- a/apps/docs/content/components/pagination/disabled.ts +++ b/apps/docs/content/components/pagination/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/initial-page.raw.jsx b/apps/docs/content/components/pagination/initial-page.raw.jsx new file mode 100644 index 000000000..3c255ae34 --- /dev/null +++ b/apps/docs/content/components/pagination/initial-page.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/initial-page.ts b/apps/docs/content/components/pagination/initial-page.ts index 0d0dd5277..7a868386d 100644 --- a/apps/docs/content/components/pagination/initial-page.ts +++ b/apps/docs/content/components/pagination/initial-page.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./initial-page.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/loop.raw.jsx b/apps/docs/content/components/pagination/loop.raw.jsx new file mode 100644 index 000000000..38d37be5d --- /dev/null +++ b/apps/docs/content/components/pagination/loop.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/loop.ts b/apps/docs/content/components/pagination/loop.ts index a0b3d320f..75721e3bc 100644 --- a/apps/docs/content/components/pagination/loop.ts +++ b/apps/docs/content/components/pagination/loop.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./loop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/radius.raw.jsx b/apps/docs/content/components/pagination/radius.raw.jsx new file mode 100644 index 000000000..583afb18a --- /dev/null +++ b/apps/docs/content/components/pagination/radius.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "xl", "lg", "md", "sm", "base", "none"]; + + return ( +
    + {radius.map((r) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/pagination/radius.ts b/apps/docs/content/components/pagination/radius.ts index 6cc77848a..7b78db1ce 100644 --- a/apps/docs/content/components/pagination/radius.ts +++ b/apps/docs/content/components/pagination/radius.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const radius = ["full", "xl", "lg", "md", "sm", "base", "none"] - - return ( -
    - {radius.map((r) => ( - - ))} -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/shadow.raw.jsx b/apps/docs/content/components/pagination/shadow.raw.jsx new file mode 100644 index 000000000..a1e25bf9c --- /dev/null +++ b/apps/docs/content/components/pagination/shadow.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/shadow.ts b/apps/docs/content/components/pagination/shadow.ts index 12edcbb3e..a18f8ca4b 100644 --- a/apps/docs/content/components/pagination/shadow.ts +++ b/apps/docs/content/components/pagination/shadow.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./shadow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/siblings.raw.jsx b/apps/docs/content/components/pagination/siblings.raw.jsx new file mode 100644 index 000000000..711a37d3b --- /dev/null +++ b/apps/docs/content/components/pagination/siblings.raw.jsx @@ -0,0 +1,14 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ( +
    +

    1 Sibling (default)

    + +

    2 Siblings

    + +

    3 Siblings

    + +
    + ); +} diff --git a/apps/docs/content/components/pagination/siblings.ts b/apps/docs/content/components/pagination/siblings.ts index e54287d83..af9303609 100644 --- a/apps/docs/content/components/pagination/siblings.ts +++ b/apps/docs/content/components/pagination/siblings.ts @@ -1,25 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
    -

    1 Sibling (default)

    - -

    2 Siblings

    - -

    3 Siblings

    - -
    - ); -}`; +import App from "./siblings.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/sizes.raw.jsx b/apps/docs/content/components/pagination/sizes.raw.jsx new file mode 100644 index 000000000..a91ac73bc --- /dev/null +++ b/apps/docs/content/components/pagination/sizes.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/pagination/sizes.ts b/apps/docs/content/components/pagination/sizes.ts index 0400dfff0..85a2f5b30 100644 --- a/apps/docs/content/components/pagination/sizes.ts +++ b/apps/docs/content/components/pagination/sizes.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const sizes = ["sm", "md", "lg"] - - return ( -
    - {sizes.map((size) => ( - - ))} -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/usage.raw.jsx b/apps/docs/content/components/pagination/usage.raw.jsx new file mode 100644 index 000000000..7bc069b20 --- /dev/null +++ b/apps/docs/content/components/pagination/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/usage.ts b/apps/docs/content/components/pagination/usage.ts index 7b042283a..1118304c3 100644 --- a/apps/docs/content/components/pagination/usage.ts +++ b/apps/docs/content/components/pagination/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/variants.raw.jsx b/apps/docs/content/components/pagination/variants.raw.jsx new file mode 100644 index 000000000..5de44baff --- /dev/null +++ b/apps/docs/content/components/pagination/variants.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "faded", "light"]; + + return ( +
    + {variants.map((variant) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/pagination/variants.ts b/apps/docs/content/components/pagination/variants.ts index 7e049b1eb..ddea95fb2 100644 --- a/apps/docs/content/components/pagination/variants.ts +++ b/apps/docs/content/components/pagination/variants.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const variants = ["flat", "bordered", "faded", "light"] - - return ( -
    - {variants.map((variant) => ( - - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/arrow.raw.jsx b/apps/docs/content/components/popover/arrow.raw.jsx new file mode 100644 index 000000000..61a1799eb --- /dev/null +++ b/apps/docs/content/components/popover/arrow.raw.jsx @@ -0,0 +1,17 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     +     + ); +} diff --git a/apps/docs/content/components/popover/arrow.ts b/apps/docs/content/components/popover/arrow.ts index dcbd90869..d04dbb0e9 100644 --- a/apps/docs/content/components/popover/arrow.ts +++ b/apps/docs/content/components/popover/arrow.ts @@ -1,20 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     -     - ); -}`; +import App from "./arrow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/backdrop.raw.jsx b/apps/docs/content/components/popover/backdrop.raw.jsx new file mode 100644 index 000000000..0c43b090d --- /dev/null +++ b/apps/docs/content/components/popover/backdrop.raw.jsx @@ -0,0 +1,38 @@ +import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; + +export default function App() { + const backdrops = ["opaque", "blur", "transparent"]; + + const content = ( + + {(titleProps) => ( +
    +

    + Dimensions +

    +
    + + + + +
    +
    + )} +     + ); + + return ( +
    + {backdrops.map((backdrop) => ( + + + + + {content} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/popover/backdrop.ts b/apps/docs/content/components/popover/backdrop.ts index be28d365d..53412b0f5 100644 --- a/apps/docs/content/components/popover/backdrop.ts +++ b/apps/docs/content/components/popover/backdrop.ts @@ -1,48 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; - -export default function App() { - - const backdrops = ["opaque", "blur", "transparent"]; - - const content = ( - - {(titleProps) => ( -
    -

    - Dimensions -

    -
    - - - - -
    -
    - )} -     - ) - - return ( -
    - {backdrops.map((backdrop) => ( - - - - - {content} - - ))} -
    - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/colors.raw.jsx b/apps/docs/content/components/popover/colors.raw.jsx new file mode 100644 index 000000000..5e255bdb6 --- /dev/null +++ b/apps/docs/content/components/popover/colors.raw.jsx @@ -0,0 +1,29 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const content = ( + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     + ); + + const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"]; + + return ( +
    + {colors.map((color) => ( + + + + + {content} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/popover/colors.ts b/apps/docs/content/components/popover/colors.ts index 4cff07649..d5bef810a 100644 --- a/apps/docs/content/components/popover/colors.ts +++ b/apps/docs/content/components/popover/colors.ts @@ -1,40 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const content = ( - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     - ); - - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - "foreground", - ]; - - return ( -
    - {colors.map((color) => ( - - - - - {content} - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/controlled.raw.jsx b/apps/docs/content/components/popover/controlled.raw.jsx new file mode 100644 index 000000000..f246c3353 --- /dev/null +++ b/apps/docs/content/components/popover/controlled.raw.jsx @@ -0,0 +1,22 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
    + setIsOpen(open)}> + + + + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     +     +

    Open: {isOpen ? "true" : "false"}

    +
    + ); +} diff --git a/apps/docs/content/components/popover/controlled.ts b/apps/docs/content/components/popover/controlled.ts index c0dd3736d..2c3f0cacb 100644 --- a/apps/docs/content/components/popover/controlled.ts +++ b/apps/docs/content/components/popover/controlled.ts @@ -1,25 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - - return ( -
    - setIsOpen(open)}> - - - - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     -     -

    Open: {isOpen ? "true" : "false"}

    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/custom-motion.raw.jsx b/apps/docs/content/components/popover/custom-motion.raw.jsx new file mode 100644 index 000000000..3629b32d8 --- /dev/null +++ b/apps/docs/content/components/popover/custom-motion.raw.jsx @@ -0,0 +1,45 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     +     + ); +} diff --git a/apps/docs/content/components/popover/custom-motion.ts b/apps/docs/content/components/popover/custom-motion.ts index 90332f7f0..389f462dd 100644 --- a/apps/docs/content/components/popover/custom-motion.ts +++ b/apps/docs/content/components/popover/custom-motion.ts @@ -1,48 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     -     - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/custom-styles.raw.jsx b/apps/docs/content/components/popover/custom-styles.raw.jsx new file mode 100644 index 000000000..4c34e65d9 --- /dev/null +++ b/apps/docs/content/components/popover/custom-styles.raw.jsx @@ -0,0 +1,36 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + {(titleProps) => ( +
    +

    + Popover Content +

    +
    This is the popover content
    +
    + )} +     +     + ); +} diff --git a/apps/docs/content/components/popover/custom-styles.ts b/apps/docs/content/components/popover/custom-styles.ts index 42684474c..da3ea9093 100644 --- a/apps/docs/content/components/popover/custom-styles.ts +++ b/apps/docs/content/components/popover/custom-styles.ts @@ -1,39 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - {(titleProps) => ( -
    -

    - Popover Content -

    -
    This is the popover content
    -
    - )} -     -     - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/custom-trigger.raw.jsx b/apps/docs/content/components/popover/custom-trigger.raw.jsx new file mode 100644 index 000000000..bca3caa64 --- /dev/null +++ b/apps/docs/content/components/popover/custom-trigger.raw.jsx @@ -0,0 +1,85 @@ +import { + Avatar, + Button, + Card, + CardBody, + CardFooter, + CardHeader, + Popover, + PopoverTrigger, + PopoverContent, + Button, + User, +} from "@nextui-org/react"; + +export const UserTwitterCard = () => { + const [isFollowed, setIsFollowed] = React.useState(false); + + return ( + + +
    + +
    +

    Zoey Lang

    +
    @zoeylang
    +
    +
    + +     + +

    + Full-stack developer, @getnextui lover she/her + + 🎉 + +

    +     + +
    +

    4

    +

    Following

    +
    +
    +

    97.1K

    +

    Followers

    +
    +     +     + ); +}; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/popover/custom-trigger.ts b/apps/docs/content/components/popover/custom-trigger.ts index 48d95eac2..dcc6b44a0 100644 --- a/apps/docs/content/components/popover/custom-trigger.ts +++ b/apps/docs/content/components/popover/custom-trigger.ts @@ -1,78 +1,7 @@ -const UserTwitterCard = `import { Avatar, Button, Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react"; - -export const UserTwitterCard = () => { - const [isFollowed, setIsFollowed] = React.useState(false); - - return ( - - -
    - -
    -

    Zoey Lang

    -
    @zoeylang
    -
    -
    - -     - -

    - Full-stack developer, @getnextui lover she/her - - 🎉 - -

    -     - -
    -

    4

    -

    Following

    -
    -
    -

    97.1K

    -

    Followers

    -
    -     -     - ); -};`; - -const App = `import {Popover, PopoverTrigger, PopoverContent, Button, User} from "@nextui-org/react"; -import {UserTwitterCard} from "./UserTwitterCard"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./custom-trigger.raw.jsx?raw"; const react = { "/App.jsx": App, - "/UserTwitterCard.jsx": UserTwitterCard, }; export default { diff --git a/apps/docs/content/components/popover/offset.raw.jsx b/apps/docs/content/components/popover/offset.raw.jsx new file mode 100644 index 000000000..2658e184d --- /dev/null +++ b/apps/docs/content/components/popover/offset.raw.jsx @@ -0,0 +1,17 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     +     + ); +} diff --git a/apps/docs/content/components/popover/offset.ts b/apps/docs/content/components/popover/offset.ts index cdcd9328e..2fb601047 100644 --- a/apps/docs/content/components/popover/offset.ts +++ b/apps/docs/content/components/popover/offset.ts @@ -1,20 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     -     - ); -}`; +import App from "./offset.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/placements.raw.jsx b/apps/docs/content/components/popover/placements.raw.jsx new file mode 100644 index 000000000..57e62d3a9 --- /dev/null +++ b/apps/docs/content/components/popover/placements.raw.jsx @@ -0,0 +1,42 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const content = ( + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     + ); + + const placements = [ + "top-start", + "top", + "top-end", + "bottom-start", + "bottom", + "bottom-end", + "right-start", + "right", + "right-end", + "left-start", + "left", + "left-end", + ]; + + return ( +
    + {placements.map((placement) => ( + + + + + {content} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/popover/placements.ts b/apps/docs/content/components/popover/placements.ts index 2ec2ca602..dc67908b7 100644 --- a/apps/docs/content/components/popover/placements.ts +++ b/apps/docs/content/components/popover/placements.ts @@ -1,45 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const content = ( - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     - ); - - const placements = [ - "top-start", - "top", - "top-end", - "bottom-start", - "bottom", - "bottom-end", - "right-start", - "right", - "right-end", - "left-start", - "left", - "left-end", - ]; - - return ( -
    - {placements.map((placement) => ( - - - - - {content} - - ))} -
    - ); -}`; +import App from "./placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/title-props.raw.jsx b/apps/docs/content/components/popover/title-props.raw.jsx new file mode 100644 index 000000000..464e8f073 --- /dev/null +++ b/apps/docs/content/components/popover/title-props.raw.jsx @@ -0,0 +1,21 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + {(titleProps) => ( +
    +

    + Popover Content +

    +
    This is the popover content
    +
    + )} +     +     + ); +} diff --git a/apps/docs/content/components/popover/title-props.ts b/apps/docs/content/components/popover/title-props.ts index 022087fe2..3c92a7ebe 100644 --- a/apps/docs/content/components/popover/title-props.ts +++ b/apps/docs/content/components/popover/title-props.ts @@ -1,24 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - {(titleProps) => ( -
    -

    - Popover Content -

    -
    This is the popover content
    -
    - )} -     -     - ); -}`; +import App from "./title-props.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/usage.raw.jsx b/apps/docs/content/components/popover/usage.raw.jsx new file mode 100644 index 000000000..2d25bb18f --- /dev/null +++ b/apps/docs/content/components/popover/usage.raw.jsx @@ -0,0 +1,17 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     +     + ); +} diff --git a/apps/docs/content/components/popover/usage.ts b/apps/docs/content/components/popover/usage.ts index 7f5a4a17e..1118304c3 100644 --- a/apps/docs/content/components/popover/usage.ts +++ b/apps/docs/content/components/popover/usage.ts @@ -1,20 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     -     - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/variants.raw.jsx b/apps/docs/content/components/popover/variants.raw.jsx new file mode 100644 index 000000000..9b08823ad --- /dev/null +++ b/apps/docs/content/components/popover/variants.raw.jsx @@ -0,0 +1,29 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const content = ( + +
    +
    Popover Content
    +
    This is the popover content
    +
    +     + ); + + const variants = ["solid", "bordered", "flat", "faded", "shadow"]; + + return ( +
    + {variants.map((variant) => ( + + + + + {content} + + ))} +
    + ); +} diff --git a/apps/docs/content/components/popover/variants.ts b/apps/docs/content/components/popover/variants.ts index ee608fd15..ddea95fb2 100644 --- a/apps/docs/content/components/popover/variants.ts +++ b/apps/docs/content/components/popover/variants.ts @@ -1,32 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const content = ( - -
    -
    Popover Content
    -
    This is the popover content
    -
    -     - ); - - const variants = ["solid", "bordered", "flat", "faded", "shadow"]; - - return ( -
    - {variants.map((variant) => ( - - - - - {content} - - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/with-form.raw.jsx b/apps/docs/content/components/popover/with-form.raw.jsx new file mode 100644 index 000000000..3b9443ad9 --- /dev/null +++ b/apps/docs/content/components/popover/with-form.raw.jsx @@ -0,0 +1,26 @@ +import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + {(titleProps) => ( +
    +

    + Dimensions +

    +
    + + + + +
    +
    + )} +     +     + ); +} diff --git a/apps/docs/content/components/popover/with-form.ts b/apps/docs/content/components/popover/with-form.ts index 59e869c42..c9a0cff49 100644 --- a/apps/docs/content/components/popover/with-form.ts +++ b/apps/docs/content/components/popover/with-form.ts @@ -1,29 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - {(titleProps) => ( -
    -

    - Dimensions -

    -
    - - - - -
    -
    - )} -     -     - ); -}`; +import App from "./with-form.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/colors.raw.jsx b/apps/docs/content/components/progress/colors.raw.jsx new file mode 100644 index 000000000..fe106ebe2 --- /dev/null +++ b/apps/docs/content/components/progress/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/progress/colors.ts b/apps/docs/content/components/progress/colors.ts index 50c389a59..d5bef810a 100644 --- a/apps/docs/content/components/progress/colors.ts +++ b/apps/docs/content/components/progress/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/custom-styles.raw.jsx b/apps/docs/content/components/progress/custom-styles.raw.jsx new file mode 100644 index 000000000..e1ded1a4b --- /dev/null +++ b/apps/docs/content/components/progress/custom-styles.raw.jsx @@ -0,0 +1,20 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/progress/custom-styles.ts b/apps/docs/content/components/progress/custom-styles.ts index 84f5061b1..da3ea9093 100644 --- a/apps/docs/content/components/progress/custom-styles.ts +++ b/apps/docs/content/components/progress/custom-styles.ts @@ -1,23 +1,4 @@ -const App = `import { Progress } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/indeterminate.raw.jsx b/apps/docs/content/components/progress/indeterminate.raw.jsx new file mode 100644 index 000000000..df0f7bd1e --- /dev/null +++ b/apps/docs/content/components/progress/indeterminate.raw.jsx @@ -0,0 +1,5 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/progress/indeterminate.ts b/apps/docs/content/components/progress/indeterminate.ts index ea51f815f..7094e4295 100644 --- a/apps/docs/content/components/progress/indeterminate.ts +++ b/apps/docs/content/components/progress/indeterminate.ts @@ -1,15 +1,4 @@ -const App = `import { Progress } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./indeterminate.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/label.raw.jsx b/apps/docs/content/components/progress/label.raw.jsx new file mode 100644 index 000000000..f623f9081 --- /dev/null +++ b/apps/docs/content/components/progress/label.raw.jsx @@ -0,0 +1,5 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/progress/label.ts b/apps/docs/content/components/progress/label.ts index ec0021c73..254b95afb 100644 --- a/apps/docs/content/components/progress/label.ts +++ b/apps/docs/content/components/progress/label.ts @@ -1,10 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/sizes.raw.jsx b/apps/docs/content/components/progress/sizes.raw.jsx new file mode 100644 index 000000000..dae25bd97 --- /dev/null +++ b/apps/docs/content/components/progress/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/progress/sizes.ts b/apps/docs/content/components/progress/sizes.ts index a52132738..85a2f5b30 100644 --- a/apps/docs/content/components/progress/sizes.ts +++ b/apps/docs/content/components/progress/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/striped.raw.jsx b/apps/docs/content/components/progress/striped.raw.jsx new file mode 100644 index 000000000..f8c21c29e --- /dev/null +++ b/apps/docs/content/components/progress/striped.raw.jsx @@ -0,0 +1,7 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/progress/striped.ts b/apps/docs/content/components/progress/striped.ts index b5f348fb4..efcbdde82 100644 --- a/apps/docs/content/components/progress/striped.ts +++ b/apps/docs/content/components/progress/striped.ts @@ -1,17 +1,4 @@ -const App = `import { Progress } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -} -`; +import App from "./striped.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/usage.raw.jsx b/apps/docs/content/components/progress/usage.raw.jsx new file mode 100644 index 000000000..d1e31aff4 --- /dev/null +++ b/apps/docs/content/components/progress/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/progress/usage.ts b/apps/docs/content/components/progress/usage.ts index 61bc662eb..1118304c3 100644 --- a/apps/docs/content/components/progress/usage.ts +++ b/apps/docs/content/components/progress/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/value-formatting.raw.jsx b/apps/docs/content/components/progress/value-formatting.raw.jsx new file mode 100644 index 000000000..f6defdafc --- /dev/null +++ b/apps/docs/content/components/progress/value-formatting.raw.jsx @@ -0,0 +1,16 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/progress/value-formatting.ts b/apps/docs/content/components/progress/value-formatting.ts index d31dc42a9..0cd558d45 100644 --- a/apps/docs/content/components/progress/value-formatting.ts +++ b/apps/docs/content/components/progress/value-formatting.ts @@ -1,19 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./value-formatting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/value.raw.jsx b/apps/docs/content/components/progress/value.raw.jsx new file mode 100644 index 000000000..2700ccda5 --- /dev/null +++ b/apps/docs/content/components/progress/value.raw.jsx @@ -0,0 +1,24 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0); + + React.useEffect(() => { + const interval = setInterval(() => { + setValue((v) => (v >= 100 ? 0 : v + 10)); + }, 500); + + return () => clearInterval(interval); + }, []); + + return ( + + ); +} diff --git a/apps/docs/content/components/progress/value.ts b/apps/docs/content/components/progress/value.ts index 8b87769cb..e2de0e902 100644 --- a/apps/docs/content/components/progress/value.ts +++ b/apps/docs/content/components/progress/value.ts @@ -1,27 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0); - - React.useEffect(() => { - const interval = setInterval(() => { - setValue((v) => (v >= 100 ? 0 : v + 10)); - }, 500); - - return () => clearInterval(interval); - }, []); - - return ( - - ); -}`; +import App from "./value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/controlled.raw.jsx b/apps/docs/content/components/radio-group/controlled.raw.jsx new file mode 100644 index 000000000..f55d1149f --- /dev/null +++ b/apps/docs/content/components/radio-group/controlled.raw.jsx @@ -0,0 +1,18 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("london"); + + return ( +
    + + Buenos Aires + Sydney + San Francisco + London + Tokyo + +

    Selected: {selected}

    +
    + ); +} diff --git a/apps/docs/content/components/radio-group/controlled.ts b/apps/docs/content/components/radio-group/controlled.ts index dcfc6298c..2c3f0cacb 100644 --- a/apps/docs/content/components/radio-group/controlled.ts +++ b/apps/docs/content/components/radio-group/controlled.ts @@ -1,25 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("london"); - - return ( -
    - - Buenos Aires - Sydney - San Francisco - London - Tokyo - -

    Selected: {selected}

    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.jsx b/apps/docs/content/components/radio-group/custom-impl.raw.jsx new file mode 100644 index 000000000..a4676eff4 --- /dev/null +++ b/apps/docs/content/components/radio-group/custom-impl.raw.jsx @@ -0,0 +1,55 @@ +import {RadioGroup, useRadio, VisuallyHidden, cn} from "@nextui-org/react"; + +export const CustomRadio = (props) => { + const { + Component, + children, + description, + getBaseProps, + getWrapperProps, + getInputProps, + getLabelProps, + getLabelWrapperProps, + getControlProps, + } = useRadio(props); + + return ( + + + + + + + +
    + {children && {children}} + {description && ( + {description} + )} +
    +     + ); +}; + +export default function App() { + return ( + + + Free + + + Pro + + + Enterprise + + + ); +} diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.tsx b/apps/docs/content/components/radio-group/custom-impl.raw.tsx new file mode 100644 index 000000000..ca96dac02 --- /dev/null +++ b/apps/docs/content/components/radio-group/custom-impl.raw.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import {RadioGroup, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react"; + +export const CustomRadio = (props: RadioProps) => { + const { + Component, + children, + description, + getBaseProps, + getWrapperProps, + getInputProps, + getLabelProps, + getLabelWrapperProps, + getControlProps, + } = useRadio(props); + + return ( + + + + + + + +
    + {children && {children}} + {description && ( + {description} + )} +
    +     + ); +}; + +export default function App() { + return ( + + + Free + + + Pro + + + Enterprise + + + ); +} diff --git a/apps/docs/content/components/radio-group/custom-impl.ts b/apps/docs/content/components/radio-group/custom-impl.ts index f2c072f1d..ef0d8ef53 100644 --- a/apps/docs/content/components/radio-group/custom-impl.ts +++ b/apps/docs/content/components/radio-group/custom-impl.ts @@ -1,122 +1,5 @@ -const App = `import {RadioGroup, Radio, useRadio, VisuallyHidden, cn} from "@nextui-org/react"; - -export const CustomRadio = (props) => { - const { - Component, - children, - isSelected, - description, - getBaseProps, - getWrapperProps, - getInputProps, - getLabelProps, - getLabelWrapperProps, - getControlProps, - } = useRadio(props); - - return ( - - - - - - - -
    - {children && {children}} - {description && ( - {description} - )} -
    -     - ); -}; - -export default function App() { - return ( - - - Free - - - Pro - - - Enterprise - - - ); -}`; - -const AppTs = `import {RadioGroup, Radio, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react"; - -export const CustomRadio = (props: RadioProps) => { - const { - Component, - children, - isSelected, - description, - getBaseProps, - getWrapperProps, - getInputProps, - getLabelProps, - getLabelWrapperProps, - getControlProps, - } = useRadio(props); - - return ( - - - - - - - -
    - {children && {children}} - {description && ( - {description} - )} -
    -     - ); -}; - -export default function App() { - return ( - - - Free - - - Pro - - - Enterprise - - - ); -}`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/custom-styles.raw.jsx b/apps/docs/content/components/radio-group/custom-styles.raw.jsx new file mode 100644 index 000000000..c034ff878 --- /dev/null +++ b/apps/docs/content/components/radio-group/custom-styles.raw.jsx @@ -0,0 +1,36 @@ +import {RadioGroup, Radio, cn} from "@nextui-org/react"; + +export const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); +}; + +export default function App() { + return ( + + + Free + + + Pro + + + Enterprise + + + ); +} diff --git a/apps/docs/content/components/radio-group/custom-styles.ts b/apps/docs/content/components/radio-group/custom-styles.ts index 32ecea080..da3ea9093 100644 --- a/apps/docs/content/components/radio-group/custom-styles.ts +++ b/apps/docs/content/components/radio-group/custom-styles.ts @@ -1,42 +1,4 @@ -const App = `import {RadioGroup, Radio, cn} from "@nextui-org/react"; - -export const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); -}; - -export default function App() { - return ( - - - Free - - - Pro - - - Enterprise - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/default-value.raw.jsx b/apps/docs/content/components/radio-group/default-value.raw.jsx new file mode 100644 index 000000000..18df962e5 --- /dev/null +++ b/apps/docs/content/components/radio-group/default-value.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/default-value.ts b/apps/docs/content/components/radio-group/default-value.ts index d10be982f..6a12c7781 100644 --- a/apps/docs/content/components/radio-group/default-value.ts +++ b/apps/docs/content/components/radio-group/default-value.ts @@ -1,20 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./default-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/disabled.raw.jsx b/apps/docs/content/components/radio-group/disabled.raw.jsx new file mode 100644 index 000000000..950e2d63d --- /dev/null +++ b/apps/docs/content/components/radio-group/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/disabled.ts b/apps/docs/content/components/radio-group/disabled.ts index b707ad15c..1a215cc91 100644 --- a/apps/docs/content/components/radio-group/disabled.ts +++ b/apps/docs/content/components/radio-group/disabled.ts @@ -1,19 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/horizontal.raw.jsx b/apps/docs/content/components/radio-group/horizontal.raw.jsx new file mode 100644 index 000000000..9e822ee18 --- /dev/null +++ b/apps/docs/content/components/radio-group/horizontal.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/horizontal.ts b/apps/docs/content/components/radio-group/horizontal.ts index 543ceacbf..60be4b407 100644 --- a/apps/docs/content/components/radio-group/horizontal.ts +++ b/apps/docs/content/components/radio-group/horizontal.ts @@ -1,19 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./horizontal.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/invalid.raw.jsx b/apps/docs/content/components/radio-group/invalid.raw.jsx new file mode 100644 index 000000000..6abf555c0 --- /dev/null +++ b/apps/docs/content/components/radio-group/invalid.raw.jsx @@ -0,0 +1,27 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("london"); + + const validOptions = ["buenos-aires", "san-francisco", "tokyo"]; + + const isInvalid = !validOptions.includes(selected); + + return ( +
    + + Buenos Aires + Sydney + San Francisco + London + Tokyo + +

    Selected: {selected}

    +
    + ); +} diff --git a/apps/docs/content/components/radio-group/invalid.ts b/apps/docs/content/components/radio-group/invalid.ts index 163615f5e..a02a8fe9c 100644 --- a/apps/docs/content/components/radio-group/invalid.ts +++ b/apps/docs/content/components/radio-group/invalid.ts @@ -1,30 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("london"); - - const validOptions = ["buenos-aires", "san-francisco", "tokyo"]; - - const isInvalid = !validOptions.includes(selected); - - return ( -
    - - Buenos Aires - Sydney - San Francisco - London - Tokyo - -

    Selected: {selected}

    -
    - ); -}`; +import App from "./invalid.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/usage.raw.jsx b/apps/docs/content/components/radio-group/usage.raw.jsx new file mode 100644 index 000000000..90f7d3bc8 --- /dev/null +++ b/apps/docs/content/components/radio-group/usage.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/usage.ts b/apps/docs/content/components/radio-group/usage.ts index 70292f055..1118304c3 100644 --- a/apps/docs/content/components/radio-group/usage.ts +++ b/apps/docs/content/components/radio-group/usage.ts @@ -1,18 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/with-description.raw.jsx b/apps/docs/content/components/radio-group/with-description.raw.jsx new file mode 100644 index 000000000..5764f14cc --- /dev/null +++ b/apps/docs/content/components/radio-group/with-description.raw.jsx @@ -0,0 +1,20 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + + Buenos Aires + + + Canberra + + + London + + + Tokyo + + + ); +} diff --git a/apps/docs/content/components/radio-group/with-description.ts b/apps/docs/content/components/radio-group/with-description.ts index 8514baafb..d42b2150f 100644 --- a/apps/docs/content/components/radio-group/with-description.ts +++ b/apps/docs/content/components/radio-group/with-description.ts @@ -1,26 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - - Buenos Aires - - - Canberra - - - London - - - Tokyo - - - ); -}`; +import App from "./with-description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx new file mode 100644 index 000000000..a735718b9 --- /dev/null +++ b/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx @@ -0,0 +1,15 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [focusedDate, setFocusedDate] = React.useState(defaultDate); + + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/controlled-focused-value.ts b/apps/docs/content/components/range-calendar/controlled-focused-value.ts index 94014c4cd..4a47b1bdd 100644 --- a/apps/docs/content/components/range-calendar/controlled-focused-value.ts +++ b/apps/docs/content/components/range-calendar/controlled-focused-value.ts @@ -1,18 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [focusedDate, setFocusedDate] = React.useState(defaultDate); - - return ( - - ); -}`; +import App from "./controlled-focused-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/controlled.raw.jsx b/apps/docs/content/components/range-calendar/controlled.raw.jsx new file mode 100644 index 000000000..9ac565f49 --- /dev/null +++ b/apps/docs/content/components/range-calendar/controlled.raw.jsx @@ -0,0 +1,11 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + + return ; +} diff --git a/apps/docs/content/components/range-calendar/controlled.raw.tsx b/apps/docs/content/components/range-calendar/controlled.raw.tsx new file mode 100644 index 000000000..dd4d51422 --- /dev/null +++ b/apps/docs/content/components/range-calendar/controlled.raw.tsx @@ -0,0 +1,15 @@ +import type {DateValue} from "@react-types/calendar"; +import type {RangeValue} from "@react-types/shared"; + +import React from "react"; +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState | null>({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + + return ; +} diff --git a/apps/docs/content/components/range-calendar/controlled.ts b/apps/docs/content/components/range-calendar/controlled.ts index 2544a0263..1f1a36336 100644 --- a/apps/docs/content/components/range-calendar/controlled.ts +++ b/apps/docs/content/components/range-calendar/controlled.ts @@ -1,46 +1,15 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - - return ( - - ); -}`; - -const AppTs = `import {RangeCalendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import type {RangeValue} from "@react-types/shared"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState>({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - - return ( - - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/range-calendar/disabled.raw.jsx b/apps/docs/content/components/range-calendar/disabled.raw.jsx new file mode 100644 index 000000000..b1867734a --- /dev/null +++ b/apps/docs/content/components/range-calendar/disabled.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/disabled.ts b/apps/docs/content/components/range-calendar/disabled.ts index 80f5d578e..1a215cc91 100644 --- a/apps/docs/content/components/range-calendar/disabled.ts +++ b/apps/docs/content/components/range-calendar/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/international-calendars.raw.jsx b/apps/docs/content/components/range-calendar/international-calendars.raw.jsx new file mode 100644 index 000000000..cc12c8837 --- /dev/null +++ b/apps/docs/content/components/range-calendar/international-calendars.raw.jsx @@ -0,0 +1,10 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/range-calendar/international-calendars.ts b/apps/docs/content/components/range-calendar/international-calendars.ts index bd4fac3ff..98bb8449e 100644 --- a/apps/docs/content/components/range-calendar/international-calendars.ts +++ b/apps/docs/content/components/range-calendar/international-calendars.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./international-calendars.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.jsx b/apps/docs/content/components/range-calendar/invalid-date.raw.jsx new file mode 100644 index 000000000..4813c3ac2 --- /dev/null +++ b/apps/docs/content/components/range-calendar/invalid-date.raw.jsx @@ -0,0 +1,22 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + let {locale} = useLocale(); + let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.tsx b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx new file mode 100644 index 000000000..df9833524 --- /dev/null +++ b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx @@ -0,0 +1,26 @@ +import type {DateValue} from "@react-types/calendar"; +import type {RangeValue} from "@react-types/shared"; + +import React from "react"; +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState | null>({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + let {locale} = useLocale(); + let isInvalid = isWeekend(date!.start, locale) || isWeekend(date!.end, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/invalid-date.ts b/apps/docs/content/components/range-calendar/invalid-date.ts index 4e053c065..e373a04e5 100644 --- a/apps/docs/content/components/range-calendar/invalid-date.ts +++ b/apps/docs/content/components/range-calendar/invalid-date.ts @@ -1,58 +1,15 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - let {locale} = useLocale(); - let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); - - return ( - - ); -}`; - -const AppTs = `import {RangeCalendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import type {RangeValue} from "@react-types/shared"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState>({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - let {locale} = useLocale(); - let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); - - return ( - - ); -}`; +import App from "./invalid-date.raw.jsx?raw"; +import AppTs from "./invalid-date.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/range-calendar/max-date-value.raw.jsx b/apps/docs/content/components/range-calendar/max-date-value.raw.jsx new file mode 100644 index 000000000..888dcea79 --- /dev/null +++ b/apps/docs/content/components/range-calendar/max-date-value.raw.jsx @@ -0,0 +1,6 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/max-date-value.ts b/apps/docs/content/components/range-calendar/max-date-value.ts index 32c1359e1..6a8291336 100644 --- a/apps/docs/content/components/range-calendar/max-date-value.ts +++ b/apps/docs/content/components/range-calendar/max-date-value.ts @@ -1,14 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./max-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/min-date-value.raw.jsx b/apps/docs/content/components/range-calendar/min-date-value.raw.jsx new file mode 100644 index 000000000..cbcc6865f --- /dev/null +++ b/apps/docs/content/components/range-calendar/min-date-value.raw.jsx @@ -0,0 +1,6 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/min-date-value.ts b/apps/docs/content/components/range-calendar/min-date-value.ts index 602cb5d6a..4e86e8261 100644 --- a/apps/docs/content/components/range-calendar/min-date-value.ts +++ b/apps/docs/content/components/range-calendar/min-date-value.ts @@ -1,14 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./min-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx b/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx new file mode 100644 index 000000000..9e8d39c44 --- /dev/null +++ b/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx @@ -0,0 +1,15 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let {locale} = useLocale(); + + return ( + isWeekend(date, locale)} + /> + ); +} diff --git a/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts b/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts index 15c294adb..92f01fe2c 100644 --- a/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts +++ b/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts @@ -1,18 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let {locale} = useLocale(); - - return ( - isWeekend(date, locale)} - /> - ); -}`; +import App from "./non-contiguous-ranges.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx b/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx new file mode 100644 index 000000000..479d02aa1 --- /dev/null +++ b/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/page-behaviour.ts b/apps/docs/content/components/range-calendar/page-behaviour.ts index 3408f23cc..ef31c845d 100644 --- a/apps/docs/content/components/range-calendar/page-behaviour.ts +++ b/apps/docs/content/components/range-calendar/page-behaviour.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./page-behaviour.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/presets.raw.jsx b/apps/docs/content/components/range-calendar/presets.raw.jsx new file mode 100644 index 000000000..93e190285 --- /dev/null +++ b/apps/docs/content/components/range-calendar/presets.raw.jsx @@ -0,0 +1,116 @@ +import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [value, setValue] = React.useState({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), + }); + let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); + + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextMonth = now.add({months: 1}); + + let nextWeek = { + start: startOfWeek(now.add({weeks: 1}), locale), + end: endOfWeek(now.add({weeks: 1}), locale), + }; + let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; + let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + classNames={{ + content: "w-full", + }} + focusedValue={focusedValue} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setFocusedValue} + /> +
    + ); +} diff --git a/apps/docs/content/components/range-calendar/presets.raw.tsx b/apps/docs/content/components/range-calendar/presets.raw.tsx new file mode 100644 index 000000000..51aced67b --- /dev/null +++ b/apps/docs/content/components/range-calendar/presets.raw.tsx @@ -0,0 +1,125 @@ +import type {DateValue} from "@react-types/calendar"; +import type {RangeValue} from "@react-types/shared"; + +import React from "react"; +import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import { + today, + getLocalTimeZone, + startOfWeek, + endOfWeek, + startOfMonth, + endOfMonth, +} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [value, setValue] = React.useState | null>({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), + }); + + let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); + + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextMonth = now.add({months: 1}); + + let nextWeek = { + start: startOfWeek(now.add({weeks: 1}), locale), + end: endOfWeek(now.add({weeks: 1}), locale), + }; + let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; + let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
    + + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + focusedValue={focusedValue} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setFocusedValue} + /> +
    + ); +} diff --git a/apps/docs/content/components/range-calendar/presets.ts b/apps/docs/content/components/range-calendar/presets.ts index a6157ae28..334d59a76 100644 --- a/apps/docs/content/components/range-calendar/presets.ts +++ b/apps/docs/content/components/range-calendar/presets.ts @@ -1,238 +1,5 @@ -const App = `import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let [value, setValue] = React.useState({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), - }); - let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); - - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextMonth = now.add({months: 1}); - - let nextWeek = { - start: startOfWeek(now.add({weeks: 1}), locale), - end: endOfWeek(now.add({weeks: 1}), locale), - }; - let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; - let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; - - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - classNames={{ - content: "w-full", - }} - focusedValue={focusedValue} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setFocusedValue} - /> -
    - ); -}`; - -const AppTs = `import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import type {RangeValue} from "@react-types/shared"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let [value, setValue] = React.useState>({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), - }); - - let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); - - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextMonth = now.add({months: 1}); - - let nextWeek = { - start: startOfWeek(now.add({weeks: 1}), locale), - end: endOfWeek(now.add({weeks: 1}), locale), - }; - let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; - let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; - - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
    - - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - focusedValue={focusedValue} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setFocusedValue} - /> -
    - ); -}`; +import App from "./presets.raw.jsx?raw"; +import AppTs from "./presets.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/read-only.raw.jsx b/apps/docs/content/components/range-calendar/read-only.raw.jsx new file mode 100644 index 000000000..3a6ba6e3f --- /dev/null +++ b/apps/docs/content/components/range-calendar/read-only.raw.jsx @@ -0,0 +1,15 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/read-only.ts b/apps/docs/content/components/range-calendar/read-only.ts index 1badad000..caf4be10c 100644 --- a/apps/docs/content/components/range-calendar/read-only.ts +++ b/apps/docs/content/components/range-calendar/read-only.ts @@ -1,18 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx new file mode 100644 index 000000000..380311513 --- /dev/null +++ b/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx @@ -0,0 +1,23 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + let {locale} = useLocale(); + + let isDateUnavailable = (date) => + isWeekend(date, locale) || + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ); + + return ; +} diff --git a/apps/docs/content/components/range-calendar/unavailable-dates.ts b/apps/docs/content/components/range-calendar/unavailable-dates.ts index 6d656ff8f..b4e1f4df1 100644 --- a/apps/docs/content/components/range-calendar/unavailable-dates.ts +++ b/apps/docs/content/components/range-calendar/unavailable-dates.ts @@ -1,32 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - let {locale} = useLocale(); - - let isDateUnavailable = (date) => - isWeekend(date, locale) || - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ); - - return ( - - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/usage.raw.jsx b/apps/docs/content/components/range-calendar/usage.raw.jsx new file mode 100644 index 000000000..1e81856a2 --- /dev/null +++ b/apps/docs/content/components/range-calendar/usage.raw.jsx @@ -0,0 +1,17 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/range-calendar/usage.ts b/apps/docs/content/components/range-calendar/usage.ts index 7cbaeec6e..1118304c3 100644 --- a/apps/docs/content/components/range-calendar/usage.ts +++ b/apps/docs/content/components/range-calendar/usage.ts @@ -1,20 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from '@internationalized/date'; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/visible-months.raw.jsx b/apps/docs/content/components/range-calendar/visible-months.raw.jsx new file mode 100644 index 000000000..bbefbd53e --- /dev/null +++ b/apps/docs/content/components/range-calendar/visible-months.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/visible-months.ts b/apps/docs/content/components/range-calendar/visible-months.ts index a66910792..38c2db8f0 100644 --- a/apps/docs/content/components/range-calendar/visible-months.ts +++ b/apps/docs/content/components/range-calendar/visible-months.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./visible-months.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx new file mode 100644 index 000000000..98e50fce5 --- /dev/null +++ b/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts b/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts index 05581f78a..53df2d136 100644 --- a/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts +++ b/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./with-month-and-year-picker.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx new file mode 100644 index 000000000..d31e069dd --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
    +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

    +

    + Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

    +

    + Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

    +

    + Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

    +

    + Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

    +

    + Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

    +

    + Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

    +

    + Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

    +

    + Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

    +
    +); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/custom-size.ts b/apps/docs/content/components/scroll-shadow/custom-size.ts index 5df7bfd1c..bdac09246 100644 --- a/apps/docs/content/components/scroll-shadow/custom-size.ts +++ b/apps/docs/content/components/scroll-shadow/custom-size.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = () => ( -
    -

    - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

    -

    - Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

    -

    - Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

    -

    - Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

    -

    - Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

    -

    - Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

    -

    - Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

    -

    - Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

    -

    - Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

    -
    -);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./custom-size.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx new file mode 100644 index 000000000..9f2fdf5ba --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
    +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

    +

    + Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

    +

    + Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

    +

    + Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

    +

    + Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

    +

    + Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

    +

    + Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

    +

    + Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

    +

    + Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

    +
    +); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts index 74e82bc29..c431601bc 100644 --- a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts +++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = () => ( -
    -

    - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

    -

    - Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

    -

    - Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

    -

    - Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

    -

    - Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

    -

    - Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

    -

    - Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

    -

    - Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

    -

    - Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

    -
    -);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./hide-scrollbar.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx new file mode 100644 index 000000000..4da067924 --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
    +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

    +

    + Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

    +

    + Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

    +

    + Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

    +

    + Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

    +

    + Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

    +

    + Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

    +

    + Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

    +

    + Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

    +
    +); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/horizontal.ts b/apps/docs/content/components/scroll-shadow/horizontal.ts index a9a1d87cd..60be4b407 100644 --- a/apps/docs/content/components/scroll-shadow/horizontal.ts +++ b/apps/docs/content/components/scroll-shadow/horizontal.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = ({className}) => ( -
    -

    - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

    -

    - Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

    -

    - Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

    -

    - Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

    -

    - Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

    -

    - Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

    -

    - Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

    -

    - Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

    -

    - Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

    -
    -);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./horizontal.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/offset.raw.jsx b/apps/docs/content/components/scroll-shadow/offset.raw.jsx new file mode 100644 index 000000000..e5a237b0e --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/offset.raw.jsx @@ -0,0 +1,79 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
    +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

    +

    + Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

    +

    + Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

    +

    + Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

    +

    + Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

    +

    + Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

    +

    + Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

    +

    + Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

    +

    + Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

    +
    +); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/offset.ts b/apps/docs/content/components/scroll-shadow/offset.ts index 9980333ad..2fb601047 100644 --- a/apps/docs/content/components/scroll-shadow/offset.ts +++ b/apps/docs/content/components/scroll-shadow/offset.ts @@ -1,57 +1,7 @@ -const Content = `export const Content = ({className}) => ( -
    -

    - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

    -

    - Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

    -

    - Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

    -

    - Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

    -

    - Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

    -

    - Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

    -

    - Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

    -

    - Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

    -

    - Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

    -
    -);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./offset.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/usage.raw.jsx b/apps/docs/content/components/scroll-shadow/usage.raw.jsx new file mode 100644 index 000000000..12f96b5ff --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/usage.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
    +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

    +

    + Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

    +

    + Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

    +

    + Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

    +

    + Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

    +

    + Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

    +

    + Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

    +

    + Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

    +

    + Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

    +

    + Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

    +
    +); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/usage.ts b/apps/docs/content/components/scroll-shadow/usage.ts index 5c911e8a8..1118304c3 100644 --- a/apps/docs/content/components/scroll-shadow/usage.ts +++ b/apps/docs/content/components/scroll-shadow/usage.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = () => ( -
    -

    - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

    -

    - Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

    -

    - Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

    -

    - Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

    -

    - Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

    -

    - Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

    -

    - Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

    -

    - Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

    -

    - Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

    -

    - Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

    -
    -);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/select/async-loading-items.raw.jsx b/apps/docs/content/components/select/async-loading-items.raw.jsx new file mode 100644 index 000000000..9e6e7713b --- /dev/null +++ b/apps/docs/content/components/select/async-loading-items.raw.jsx @@ -0,0 +1,98 @@ +import {Select, SelectItem} 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)); + } + + 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") { + // 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 ( + + ); +} diff --git a/apps/docs/content/components/select/async-loading-items.raw.tsx b/apps/docs/content/components/select/async-loading-items.raw.tsx new file mode 100644 index 000000000..9d27a5966 --- /dev/null +++ b/apps/docs/content/components/select/async-loading-items.raw.tsx @@ -0,0 +1,109 @@ +import React from "react"; +import {Select, SelectItem} 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([]); + 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 ( + + ); +} diff --git a/apps/docs/content/components/select/async-loading-items.ts b/apps/docs/content/components/select/async-loading-items.ts index c6de820ca..a69188c56 100644 --- a/apps/docs/content/components/select/async-loading-items.ts +++ b/apps/docs/content/components/select/async-loading-items.ts @@ -1,184 +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([]); - 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 {Select, SelectItem} 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 ( - - ); -}`; +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 { diff --git a/apps/docs/content/components/select/colors.raw.jsx b/apps/docs/content/components/select/colors.raw.jsx new file mode 100644 index 000000000..1732747ba --- /dev/null +++ b/apps/docs/content/components/select/colors.raw.jsx @@ -0,0 +1,40 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/select/colors.ts b/apps/docs/content/components/select/colors.ts index c830262ca..d5bef810a 100644 --- a/apps/docs/content/components/select/colors.ts +++ b/apps/docs/content/components/select/colors.ts @@ -1,57 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - ]; - - return ( -
    - {colors.map((color) => ( - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/custom-items.raw.jsx b/apps/docs/content/components/select/custom-items.raw.jsx new file mode 100644 index 000000000..b1b78c716 --- /dev/null +++ b/apps/docs/content/components/select/custom-items.raw.jsx @@ -0,0 +1,228 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-items.ts b/apps/docs/content/components/select/custom-items.ts index 66f7d96dd..26a1e0f9a 100644 --- a/apps/docs/content/components/select/custom-items.ts +++ b/apps/docs/content/components/select/custom-items.ts @@ -1,236 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/custom-render-value.raw.jsx b/apps/docs/content/components/select/custom-render-value.raw.jsx new file mode 100644 index 000000000..c038d4d13 --- /dev/null +++ b/apps/docs/content/components/select/custom-render-value.raw.jsx @@ -0,0 +1,247 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-render-value.raw.tsx b/apps/docs/content/components/select/custom-render-value.raw.tsx new file mode 100644 index 000000000..5c2c71f9f --- /dev/null +++ b/apps/docs/content/components/select/custom-render-value.raw.tsx @@ -0,0 +1,259 @@ +import React from "react"; +import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +type User = { + id: number; + name: string; + role: string; + team: string; + status: string; + age: string; + avatar: string; + email: string; +}; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-render-value.ts b/apps/docs/content/components/select/custom-render-value.ts index dc52e1121..3d1632068 100644 --- a/apps/docs/content/components/select/custom-render-value.ts +++ b/apps/docs/content/components/select/custom-render-value.ts @@ -1,317 +1,12 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; - -const AppTs = `import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react"; -import {users} from "./data"; - -type User = { - id: number; - name: string; - role: string; - team: string; - status: string; - age: string; - avatar: string; - email: string; -}; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-render-value.raw.jsx?raw"; +import AppTs from "./custom-render-value.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/select/custom-sections-style.raw.jsx b/apps/docs/content/components/select/custom-sections-style.raw.jsx new file mode 100644 index 000000000..17826ba15 --- /dev/null +++ b/apps/docs/content/components/select/custom-sections-style.raw.jsx @@ -0,0 +1,48 @@ +import {Select, SelectItem, SelectSection} from "@nextui-org/react"; + +export default function App() { + const headingClasses = + "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; + + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-sections-style.ts b/apps/docs/content/components/select/custom-sections-style.ts index 9551a8004..9ba8a6cd9 100644 --- a/apps/docs/content/components/select/custom-sections-style.ts +++ b/apps/docs/content/components/select/custom-sections-style.ts @@ -1,50 +1,4 @@ -const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react"; - -export default function App() { - const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; - - return ( - - ); -}`; +import App from "./custom-sections-style.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/custom-selector-icon.raw.jsx b/apps/docs/content/components/select/custom-selector-icon.raw.jsx new file mode 100644 index 000000000..f63192b0b --- /dev/null +++ b/apps/docs/content/components/select/custom-selector-icon.raw.jsx @@ -0,0 +1,57 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const SelectorIcon = (props) => { + return ( + + ); +}; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-selector-icon.ts b/apps/docs/content/components/select/custom-selector-icon.ts index 18770cfb4..ee2c7d9a8 100644 --- a/apps/docs/content/components/select/custom-selector-icon.ts +++ b/apps/docs/content/components/select/custom-selector-icon.ts @@ -1,67 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const SelectorIcon = `export const SelectorIcon = (props) => ( - -);`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {SelectorIcon} from "./SelectorIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/select/custom-styles.raw.jsx b/apps/docs/content/components/select/custom-styles.raw.jsx new file mode 100644 index 000000000..6aad7b60d --- /dev/null +++ b/apps/docs/content/components/select/custom-styles.raw.jsx @@ -0,0 +1,269 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts index ae2db45e8..da3ea9093 100644 --- a/apps/docs/content/components/select/custom-styles.ts +++ b/apps/docs/content/components/select/custom-styles.ts @@ -1,277 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/description.raw.jsx b/apps/docs/content/components/select/description.raw.jsx new file mode 100644 index 000000000..ead30aaa9 --- /dev/null +++ b/apps/docs/content/components/select/description.raw.jsx @@ -0,0 +1,33 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/description.ts b/apps/docs/content/components/select/description.ts index b39c36847..aeb6340b6 100644 --- a/apps/docs/content/components/select/description.ts +++ b/apps/docs/content/components/select/description.ts @@ -1,43 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/disabled-items.raw.jsx b/apps/docs/content/components/select/disabled-items.raw.jsx new file mode 100644 index 000000000..fcebedbb8 --- /dev/null +++ b/apps/docs/content/components/select/disabled-items.raw.jsx @@ -0,0 +1,32 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/disabled-items.ts b/apps/docs/content/components/select/disabled-items.ts index 64bed55e8..4ff907eed 100644 --- a/apps/docs/content/components/select/disabled-items.ts +++ b/apps/docs/content/components/select/disabled-items.ts @@ -1,42 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/disabled.raw.jsx b/apps/docs/content/components/select/disabled.raw.jsx new file mode 100644 index 000000000..401ae52a4 --- /dev/null +++ b/apps/docs/content/components/select/disabled.raw.jsx @@ -0,0 +1,33 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/disabled.ts b/apps/docs/content/components/select/disabled.ts index dc9b75681..1a215cc91 100644 --- a/apps/docs/content/components/select/disabled.ts +++ b/apps/docs/content/components/select/disabled.ts @@ -1,43 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/dynamic.raw.jsx b/apps/docs/content/components/select/dynamic.raw.jsx new file mode 100644 index 000000000..5796f069e --- /dev/null +++ b/apps/docs/content/components/select/dynamic.raw.jsx @@ -0,0 +1,30 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/dynamic.ts b/apps/docs/content/components/select/dynamic.ts index 6a7c5304c..5d3c97bb9 100644 --- a/apps/docs/content/components/select/dynamic.ts +++ b/apps/docs/content/components/select/dynamic.ts @@ -1,38 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/error-message.raw.jsx b/apps/docs/content/components/select/error-message.raw.jsx new file mode 100644 index 000000000..a4499144e --- /dev/null +++ b/apps/docs/content/components/select/error-message.raw.jsx @@ -0,0 +1,43 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(new Set([])); + const [touched, setTouched] = React.useState(false); + + const isValid = value.has("cat"); + + return ( + + ); +} diff --git a/apps/docs/content/components/select/error-message.ts b/apps/docs/content/components/select/error-message.ts index 416a1d49b..fb8101b13 100644 --- a/apps/docs/content/components/select/error-message.ts +++ b/apps/docs/content/components/select/error-message.ts @@ -1,53 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(new Set([])); - const [touched, setTouched] = React.useState(false); - - const isValid = value.has("cat"); - - return ( - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/item-start-content.raw.jsx b/apps/docs/content/components/select/item-start-content.raw.jsx new file mode 100644 index 000000000..9006a2bf1 --- /dev/null +++ b/apps/docs/content/components/select/item-start-content.raw.jsx @@ -0,0 +1,68 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/item-start-content.ts b/apps/docs/content/components/select/item-start-content.ts index ddf3818b2..294a22e6b 100644 --- a/apps/docs/content/components/select/item-start-content.ts +++ b/apps/docs/content/components/select/item-start-content.ts @@ -1,70 +1,4 @@ -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./item-start-content.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/label-placements.raw.jsx b/apps/docs/content/components/select/label-placements.raw.jsx new file mode 100644 index 000000000..86982bafb --- /dev/null +++ b/apps/docs/content/components/select/label-placements.raw.jsx @@ -0,0 +1,61 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
    +
    +

    Without placeholder

    +
    + {placements.map((placement) => ( + + ))} +
    +
    +
    +

    With placeholder

    +
    + {placements.map((placement) => ( + + ))} +
    +
    +
    + ); +} diff --git a/apps/docs/content/components/select/label-placements.ts b/apps/docs/content/components/select/label-placements.ts index a147bb84a..cd2a65d35 100644 --- a/apps/docs/content/components/select/label-placements.ts +++ b/apps/docs/content/components/select/label-placements.ts @@ -1,75 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
    -
    -

    Without placeholder

    -
    - {placements.map((placement) => ( - - ))} -
    -
    -
    -

    With placeholder

    -
    - {placements.map((placement) => ( - - ))} -
    -
    -
    - ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/multiple-chips.raw.jsx b/apps/docs/content/components/select/multiple-chips.raw.jsx new file mode 100644 index 000000000..3c0dd44ca --- /dev/null +++ b/apps/docs/content/components/select/multiple-chips.raw.jsx @@ -0,0 +1,243 @@ +import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/multiple-chips.raw.tsx b/apps/docs/content/components/select/multiple-chips.raw.tsx new file mode 100644 index 000000000..18f206aed --- /dev/null +++ b/apps/docs/content/components/select/multiple-chips.raw.tsx @@ -0,0 +1,255 @@ +import React from "react"; +import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +type User = { + id: number; + name: string; + role: string; + team: string; + status: string; + age: string; + avatar: string; + email: string; +}; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/multiple-chips.ts b/apps/docs/content/components/select/multiple-chips.ts index 1919c994e..0c169cde3 100644 --- a/apps/docs/content/components/select/multiple-chips.ts +++ b/apps/docs/content/components/select/multiple-chips.ts @@ -1,309 +1,12 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; - -const AppTs = `import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react"; -import {users} from "./data"; - -type User = { - id: number; - name: string; - role: string; - team: string; - status: string; - age: string; - avatar: string; - email: string; -}; - -export default function App() { - return ( - - ); -}`; +import App from "./multiple-chips.raw.jsx?raw"; +import AppTs from "./multiple-chips.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx new file mode 100644 index 000000000..1b7995756 --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx @@ -0,0 +1,43 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set([])); + + const handleSelectionChange = (e) => { + setValues(new Set(e.target.value.split(","))); + }; + + return ( +
    + +

    Selected: {Array.from(values).join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx new file mode 100644 index 000000000..d17129253 --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx @@ -0,0 +1,46 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set([])); + + const handleSelectionChange = (e: React.ChangeEvent) => { + setValues(new Set(e.target.value.split(","))); + }; + + return ( +
    + +

    Selected: {Array.from(values).join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.ts b/apps/docs/content/components/select/multiple-controlled-onchange.ts index e12d5cf7d..a8b2a2175 100644 --- a/apps/docs/content/components/select/multiple-controlled-onchange.ts +++ b/apps/docs/content/components/select/multiple-controlled-onchange.ts @@ -1,89 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set([])); - - const handleSelectionChange = (e) => { - setValues(new Set(e.target.value.split(","))); - }; - - return ( -
    - -

    Selected: {Array.from(values).join(", ")}

    -
    - ); -}`; - -const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set([])); - - const handleSelectionChange = (e: React.ChangeEvent) => { - setValues(new Set(e.target.value.split(","))); - }; - - return ( -
    - -

    Selected: {Array.from(values).join(", ")}

    -
    - ); -}`; +import App from "./multiple-controlled-onchange.raw.jsx?raw"; +import AppTs from "./multiple-controlled-onchange.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/select/multiple-controlled.raw.jsx b/apps/docs/content/components/select/multiple-controlled.raw.jsx new file mode 100644 index 000000000..0d18ab0e6 --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled.raw.jsx @@ -0,0 +1,39 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set(["cat", "dog"])); + + return ( +
    + +

    Selected: {Array.from(values).join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/select/multiple-controlled.raw.tsx b/apps/docs/content/components/select/multiple-controlled.raw.tsx new file mode 100644 index 000000000..c9b9d3f8b --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled.raw.tsx @@ -0,0 +1,42 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set(["cat", "dog"])); + + return ( +
    + +

    Selected: {Array.from(values).join(", ")}

    +
    + ); +} diff --git a/apps/docs/content/components/select/multiple-controlled.ts b/apps/docs/content/components/select/multiple-controlled.ts index 2bfc63c6c..ebc28a01d 100644 --- a/apps/docs/content/components/select/multiple-controlled.ts +++ b/apps/docs/content/components/select/multiple-controlled.ts @@ -1,81 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["cat", "dog"])); - - return ( -
    - -

    Selected: {Array.from(values).join(", ")}

    -
    - ); -}`; - -const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["cat", "dog"])); - - return ( -
    - -

    Selected: {Array.from(values).join(", ")}

    -
    - ); -}`; +import App from "./multiple-controlled.raw.jsx?raw"; +import AppTs from "./multiple-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/select/multiple.raw.jsx b/apps/docs/content/components/select/multiple.raw.jsx new file mode 100644 index 000000000..71bf4b146 --- /dev/null +++ b/apps/docs/content/components/select/multiple.raw.jsx @@ -0,0 +1,32 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/multiple.ts b/apps/docs/content/components/select/multiple.ts index 5edb2da50..8ad090fa2 100644 --- a/apps/docs/content/components/select/multiple.ts +++ b/apps/docs/content/components/select/multiple.ts @@ -1,42 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./multiple.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/open-state.raw.jsx b/apps/docs/content/components/select/open-state.raw.jsx new file mode 100644 index 000000000..bd553f9d0 --- /dev/null +++ b/apps/docs/content/components/select/open-state.raw.jsx @@ -0,0 +1,41 @@ +import {Select, SelectItem, Button} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/select/open-state.ts b/apps/docs/content/components/select/open-state.ts index 97e13a99a..5d40fb0bf 100644 --- a/apps/docs/content/components/select/open-state.ts +++ b/apps/docs/content/components/select/open-state.ts @@ -1,51 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem, Button} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - - return ( -
    - - -
    - ); -}`; +import App from "./open-state.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/radius.raw.jsx b/apps/docs/content/components/select/radius.raw.jsx new file mode 100644 index 000000000..9375e69cb --- /dev/null +++ b/apps/docs/content/components/select/radius.raw.jsx @@ -0,0 +1,40 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
    + {radius.map((r) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/select/radius.ts b/apps/docs/content/components/select/radius.ts index 543c0c91d..7b78db1ce 100644 --- a/apps/docs/content/components/select/radius.ts +++ b/apps/docs/content/components/select/radius.ts @@ -1,56 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const radius = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
    - {radius.map((r) => ( - - ))} -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/required.raw.jsx b/apps/docs/content/components/select/required.raw.jsx new file mode 100644 index 000000000..9a9f4f0cb --- /dev/null +++ b/apps/docs/content/components/select/required.raw.jsx @@ -0,0 +1,33 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/required.ts b/apps/docs/content/components/select/required.ts index f6447eba5..b50b781e6 100644 --- a/apps/docs/content/components/select/required.ts +++ b/apps/docs/content/components/select/required.ts @@ -1,43 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/sections.raw.jsx b/apps/docs/content/components/select/sections.raw.jsx new file mode 100644 index 000000000..30a61aa00 --- /dev/null +++ b/apps/docs/content/components/select/sections.raw.jsx @@ -0,0 +1,28 @@ +import {Select, SelectItem, SelectSection} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/sections.ts b/apps/docs/content/components/select/sections.ts index e1c02ebdb..17cd360ea 100644 --- a/apps/docs/content/components/select/sections.ts +++ b/apps/docs/content/components/select/sections.ts @@ -1,35 +1,4 @@ -const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.jsx b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx new file mode 100644 index 000000000..43b41a4e2 --- /dev/null +++ b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx @@ -0,0 +1,43 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + + const handleSelectionChange = (e) => { + setValue(e.target.value); + }; + + return ( +
    + +

    Selected: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.tsx b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx new file mode 100644 index 000000000..c5199449c --- /dev/null +++ b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + + const handleSelectionChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + + return ( +
    + +

    Selected: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/select/single-controlled-onchange.ts b/apps/docs/content/components/select/single-controlled-onchange.ts index b74254621..3b52be133 100644 --- a/apps/docs/content/components/select/single-controlled-onchange.ts +++ b/apps/docs/content/components/select/single-controlled-onchange.ts @@ -1,89 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(""); - - const handleSelectionChange = (e) => { - setValue(e.target.value); - }; - - return ( -
    - -

    Selected: {value}

    -
    - ); -}`; - -const AppTs = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(""); - - const handleSelectionChange = (e: React.ChangeEvent) => { - setValue(e.target.value); - }; - - return ( -
    - -

    Selected: {value}

    -
    - ); -}`; +import App from "./single-controlled-onchange.raw.jsx?raw"; +import AppTs from "./single-controlled-onchange.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/single-controlled.raw.jsx b/apps/docs/content/components/select/single-controlled.raw.jsx new file mode 100644 index 000000000..a06601386 --- /dev/null +++ b/apps/docs/content/components/select/single-controlled.raw.jsx @@ -0,0 +1,39 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(new Set([])); + + return ( +
    + +

    Selected: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/select/single-controlled.raw.tsx b/apps/docs/content/components/select/single-controlled.raw.tsx new file mode 100644 index 000000000..13a1a847c --- /dev/null +++ b/apps/docs/content/components/select/single-controlled.raw.tsx @@ -0,0 +1,42 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(new Set([])); + + return ( +
    + +

    Selected: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/select/single-controlled.ts b/apps/docs/content/components/select/single-controlled.ts index cae9bd540..44c55e056 100644 --- a/apps/docs/content/components/select/single-controlled.ts +++ b/apps/docs/content/components/select/single-controlled.ts @@ -1,81 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(new Set([])); - - return ( -
    - -

    Selected: {value}

    -
    - ); -}`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(new Set([])); - - return ( -
    - -

    Selected: {value}

    -
    - ); -}`; +import App from "./single-controlled.raw.jsx?raw"; +import AppTs from "./single-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/sizes.raw.jsx b/apps/docs/content/components/select/sizes.raw.jsx new file mode 100644 index 000000000..afaeafc7a --- /dev/null +++ b/apps/docs/content/components/select/sizes.raw.jsx @@ -0,0 +1,45 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( +
    + + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/select/sizes.ts b/apps/docs/content/components/select/sizes.ts index 02b1cde2d..85a2f5b30 100644 --- a/apps/docs/content/components/select/sizes.ts +++ b/apps/docs/content/components/select/sizes.ts @@ -1,61 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const sizes = ["sm", "md", "lg"]; - - return ( -
    - {sizes.map((size) => ( -
    - - -
    - ))} -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/start-content.raw.jsx b/apps/docs/content/components/select/start-content.raw.jsx new file mode 100644 index 000000000..9164a68d7 --- /dev/null +++ b/apps/docs/content/components/select/start-content.raw.jsx @@ -0,0 +1,69 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const PetIcon = (props) => { + return ( + + ); +}; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/start-content.ts b/apps/docs/content/components/select/start-content.ts index 7b896eaf3..59191d72a 100644 --- a/apps/docs/content/components/select/start-content.ts +++ b/apps/docs/content/components/select/start-content.ts @@ -1,78 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const PetIcon = `export const PetIcon = (props) => ( - -);`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {PetIcon} from "./PetIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -} -`; +import App from "./start-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PetIcon.jsx": PetIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/usage.raw.jsx b/apps/docs/content/components/select/usage.raw.jsx new file mode 100644 index 000000000..133723111 --- /dev/null +++ b/apps/docs/content/components/select/usage.raw.jsx @@ -0,0 +1,34 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( +
    + + +
    + ); +} diff --git a/apps/docs/content/components/select/usage.ts b/apps/docs/content/components/select/usage.ts index d676e3edb..1118304c3 100644 --- a/apps/docs/content/components/select/usage.ts +++ b/apps/docs/content/components/select/usage.ts @@ -1,53 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( -
    - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/variants.raw.jsx b/apps/docs/content/components/select/variants.raw.jsx new file mode 100644 index 000000000..78c5577ca --- /dev/null +++ b/apps/docs/content/components/select/variants.raw.jsx @@ -0,0 +1,45 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
    + {variants.map((variant) => ( +
    + + +
    + ))} +
    + ); +} diff --git a/apps/docs/content/components/select/variants.ts b/apps/docs/content/components/select/variants.ts index 040be0e12..ddea95fb2 100644 --- a/apps/docs/content/components/select/variants.ts +++ b/apps/docs/content/components/select/variants.ts @@ -1,61 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
    - {variants.map((variant) => ( -
    - - -
    - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/without-scroll-shadow.raw.jsx b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx new file mode 100644 index 000000000..3aab534e2 --- /dev/null +++ b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx @@ -0,0 +1,35 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/without-scroll-shadow.ts b/apps/docs/content/components/select/without-scroll-shadow.ts index 7a4d8b585..1cfe3080f 100644 --- a/apps/docs/content/components/select/without-scroll-shadow.ts +++ b/apps/docs/content/components/select/without-scroll-shadow.ts @@ -1,45 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./without-scroll-shadow.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/skeleton/loaded.raw.jsx b/apps/docs/content/components/skeleton/loaded.raw.jsx new file mode 100644 index 000000000..44516e9a0 --- /dev/null +++ b/apps/docs/content/components/skeleton/loaded.raw.jsx @@ -0,0 +1,33 @@ +import {Card, Skeleton, Button} from "@nextui-org/react"; + +export default function App() { + const [isLoaded, setIsLoaded] = React.useState(false); + + const toggleLoad = () => { + setIsLoaded(!isLoaded); + }; + + return ( +
    + + +
    + +
    + +
    + + +
    + + +
    + +
    + + +
    + ); +} diff --git a/apps/docs/content/components/skeleton/loaded.ts b/apps/docs/content/components/skeleton/loaded.ts index 59cb7528f..cab1fe22e 100644 --- a/apps/docs/content/components/skeleton/loaded.ts +++ b/apps/docs/content/components/skeleton/loaded.ts @@ -1,36 +1,4 @@ -const App = `import {Card, Skeleton, Button} from "@nextui-org/react"; - -export default function App() { - const [isLoaded, setIsLoaded] = React.useState(false); - - const toggleLoad = () => { - setIsLoaded(!isLoaded); - }; - - return ( -
    - - -
    -     -
    - -
    -     - -
    -     - -
    -     -
    -     - -
    - ); -}`; +import App from "./loaded.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/skeleton/standalone.raw.jsx b/apps/docs/content/components/skeleton/standalone.raw.jsx new file mode 100644 index 000000000..bb76f7e0d --- /dev/null +++ b/apps/docs/content/components/skeleton/standalone.raw.jsx @@ -0,0 +1,15 @@ +import {Skeleton} from "@nextui-org/react"; + +export default function App() { + return ( +
    +
    + +
    +
    + + +
    +
    + ); +} diff --git a/apps/docs/content/components/skeleton/standalone.ts b/apps/docs/content/components/skeleton/standalone.ts index 09d0c1b51..450aed160 100644 --- a/apps/docs/content/components/skeleton/standalone.ts +++ b/apps/docs/content/components/skeleton/standalone.ts @@ -1,18 +1,4 @@ -const App = `import {Skeleton} from "@nextui-org/react"; - -export default function App() { - return ( -
    -
    - -
    -
    - - -
    -
    - ); -}`; +import App from "./standalone.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/skeleton/usage.raw.jsx b/apps/docs/content/components/skeleton/usage.raw.jsx new file mode 100644 index 000000000..50e4660b0 --- /dev/null +++ b/apps/docs/content/components/skeleton/usage.raw.jsx @@ -0,0 +1,22 @@ +import {Card, Skeleton} from "@nextui-org/react"; + +export default function App() { + return ( + + +
    + +
    + +
    + + +
    + + +
    + +
    + + ); +} diff --git a/apps/docs/content/components/skeleton/usage.ts b/apps/docs/content/components/skeleton/usage.ts index cdeace87e..1118304c3 100644 --- a/apps/docs/content/components/skeleton/usage.ts +++ b/apps/docs/content/components/skeleton/usage.ts @@ -1,25 +1,4 @@ -const App = `import {Card, Skeleton} from "@nextui-org/react"; - -export default function App() { - return ( - - -
    -     -
    - -
    -     - -
    -     - -
    -     -
    -     - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/colors.raw.jsx b/apps/docs/content/components/slider/colors.raw.jsx new file mode 100644 index 000000000..b96faeaa7 --- /dev/null +++ b/apps/docs/content/components/slider/colors.raw.jsx @@ -0,0 +1,22 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/slider/colors.ts b/apps/docs/content/components/slider/colors.ts index f26d3f88a..d5bef810a 100644 --- a/apps/docs/content/components/slider/colors.ts +++ b/apps/docs/content/components/slider/colors.ts @@ -1,32 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "foreground", - "primary", - "secondary", - "success", - "warning", - "danger", - ]; - - return ( -
    - {colors.map((color) => ( - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.jsx b/apps/docs/content/components/slider/controlled-change-end.raw.jsx new file mode 100644 index 000000000..53360e0be --- /dev/null +++ b/apps/docs/content/components/slider/controlled-change-end.raw.jsx @@ -0,0 +1,18 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
    + +

    Current volume: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.tsx b/apps/docs/content/components/slider/controlled-change-end.raw.tsx new file mode 100644 index 000000000..e88a35659 --- /dev/null +++ b/apps/docs/content/components/slider/controlled-change-end.raw.tsx @@ -0,0 +1,22 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
    + +

    Current volume: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/slider/controlled-change-end.ts b/apps/docs/content/components/slider/controlled-change-end.ts index 5206d4118..21ef7f007 100644 --- a/apps/docs/content/components/slider/controlled-change-end.ts +++ b/apps/docs/content/components/slider/controlled-change-end.ts @@ -1,41 +1,5 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
    - -

    Current volume: {value}

    -
    - ); -}`; - -const AppTs = `import {Slider, SliderValue} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
    - -

    Current volume: {value}

    -
    - ); -}`; +import App from "./controlled-change-end.raw.jsx?raw"; +import AppTs from "./controlled-change-end.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/controlled-range.raw.jsx b/apps/docs/content/components/slider/controlled-range.raw.jsx new file mode 100644 index 000000000..e5404dfc7 --- /dev/null +++ b/apps/docs/content/components/slider/controlled-range.raw.jsx @@ -0,0 +1,23 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState([100, 300]); + + return ( +
    + +

    + Selected budget: {Array.isArray(value) && value.map((b) => `${b}`).join(" – ")} +

    +
    + ); +} diff --git a/apps/docs/content/components/slider/controlled-range.raw.tsx b/apps/docs/content/components/slider/controlled-range.raw.tsx new file mode 100644 index 000000000..267342eb2 --- /dev/null +++ b/apps/docs/content/components/slider/controlled-range.raw.tsx @@ -0,0 +1,26 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState([100, 300]); + + return ( +
    + +

    + Selected budget: {Array.isArray(value) && value.map((b) => `$${b}`).join(" – ")} +

    +
    + ); +} diff --git a/apps/docs/content/components/slider/controlled-range.ts b/apps/docs/content/components/slider/controlled-range.ts index 61d0bf192..90412a80b 100644 --- a/apps/docs/content/components/slider/controlled-range.ts +++ b/apps/docs/content/components/slider/controlled-range.ts @@ -1,50 +1,5 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState([100, 300]); - - return ( -
    - -

    - Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")} -

    -
    - ); -}`; - -const AppTs = `import {Slider, SliderValue} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState([100, 300]); - - return ( -
    - -

    - Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")} -

    -
    - ); -}`; +import App from "./controlled-range.raw.jsx?raw"; +import AppTs from "./controlled-range.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/controlled.raw.jsx b/apps/docs/content/components/slider/controlled.raw.jsx new file mode 100644 index 000000000..52cac7299 --- /dev/null +++ b/apps/docs/content/components/slider/controlled.raw.jsx @@ -0,0 +1,91 @@ +import {Slider, Button} from "@nextui-org/react"; + +export const VolumeHighIcon = (props) => { + return ( + + ); +}; + +export const VolumeLowIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
    + setValue((prev) => (prev <= 90 ? prev + 10 : 100))} + > + + + } + size="lg" + startContent={ + + } + value={value} + onChange={setValue} + /> +

    Current volume: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/slider/controlled.raw.tsx b/apps/docs/content/components/slider/controlled.raw.tsx new file mode 100644 index 000000000..9f9728ea6 --- /dev/null +++ b/apps/docs/content/components/slider/controlled.raw.tsx @@ -0,0 +1,94 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Slider, Button} from "@nextui-org/react"; + +export const VolumeHighIcon = (props) => { + return ( + + ); +}; + +export const VolumeLowIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
    + setValue((prev) => (Number(prev) <= 90 ? Number(prev) + 10 : 100))} + > + + + } + size="lg" + startContent={ + + } + value={value} + onChange={setValue} + /> +

    Current volume: {value}

    +
    + ); +} diff --git a/apps/docs/content/components/slider/controlled.ts b/apps/docs/content/components/slider/controlled.ts index 0f7e03ef4..1f1a36336 100644 --- a/apps/docs/content/components/slider/controlled.ts +++ b/apps/docs/content/components/slider/controlled.ts @@ -1,139 +1,8 @@ -const VolumeHighIcon = `export const VolumeHighIcon = (props) => ( - -);`; - -const VolumeLowIcon = `export const VolumeLowIcon = (props) => ( - -);`; - -const App = `import {Slider, Button} from "@nextui-org/react"; -import {VolumeLowIcon} from "./VolumeLowIcon"; -import {VolumeHighIcon} from "./VolumeHighIcon"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
    - setValue((prev) => prev >= 10 ? prev - 10 : 0)} - > - - - } - endContent={ - - } - className="max-w-md" - /> -

    Current volume: {value}

    -
    - ); -}`; - -const AppTs = `import {Slider, Button, SliderValue} from "@nextui-org/react"; -import {VolumeLowIcon} from "./VolumeLowIcon"; -import {VolumeHighIcon} from "./VolumeHighIcon"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
    - setValue((prev) => prev >= 10 ? prev - 10 : 0)} - > - - - } - endContent={ - - } - className="max-w-md" - /> -

    Current volume: {value}

    -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/VolumeHighIcon.jsx": VolumeHighIcon, - "/VolumeLowIcon.jsx": VolumeLowIcon, }; const reactTs = { diff --git a/apps/docs/content/components/slider/custom-styles.raw.jsx b/apps/docs/content/components/slider/custom-styles.raw.jsx new file mode 100644 index 000000000..0090efa5d --- /dev/null +++ b/apps/docs/content/components/slider/custom-styles.raw.jsx @@ -0,0 +1,47 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/custom-styles.ts b/apps/docs/content/components/slider/custom-styles.ts index 94269cc8b..da3ea9093 100644 --- a/apps/docs/content/components/slider/custom-styles.ts +++ b/apps/docs/content/components/slider/custom-styles.ts @@ -1,50 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx new file mode 100644 index 000000000..49b2641f1 --- /dev/null +++ b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx @@ -0,0 +1,41 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/slider/disable-thumb-scale.ts b/apps/docs/content/components/slider/disable-thumb-scale.ts index 681e6fa09..a6d8994a9 100644 --- a/apps/docs/content/components/slider/disable-thumb-scale.ts +++ b/apps/docs/content/components/slider/disable-thumb-scale.ts @@ -1,44 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./disable-thumb-scale.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/disabled.raw.jsx b/apps/docs/content/components/slider/disabled.raw.jsx new file mode 100644 index 000000000..f805a3ade --- /dev/null +++ b/apps/docs/content/components/slider/disabled.raw.jsx @@ -0,0 +1,15 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/disabled.ts b/apps/docs/content/components/slider/disabled.ts index 07ac82bc4..1a215cc91 100644 --- a/apps/docs/content/components/slider/disabled.ts +++ b/apps/docs/content/components/slider/disabled.ts @@ -1,18 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/fill-offset.raw.jsx b/apps/docs/content/components/slider/fill-offset.raw.jsx new file mode 100644 index 000000000..3f432829f --- /dev/null +++ b/apps/docs/content/components/slider/fill-offset.raw.jsx @@ -0,0 +1,18 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/fill-offset.ts b/apps/docs/content/components/slider/fill-offset.ts index e293a6fa9..3a5faaa7d 100644 --- a/apps/docs/content/components/slider/fill-offset.ts +++ b/apps/docs/content/components/slider/fill-offset.ts @@ -1,21 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./fill-offset.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/get-value.raw.jsx b/apps/docs/content/components/slider/get-value.raw.jsx new file mode 100644 index 000000000..9fb2965c6 --- /dev/null +++ b/apps/docs/content/components/slider/get-value.raw.jsx @@ -0,0 +1,13 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + `${donuts} of 60 Donuts`} + label="Donuts to buy" + maxValue={60} + size="sm" + /> + ); +} diff --git a/apps/docs/content/components/slider/get-value.ts b/apps/docs/content/components/slider/get-value.ts index 58a100dbc..b44c91bd8 100644 --- a/apps/docs/content/components/slider/get-value.ts +++ b/apps/docs/content/components/slider/get-value.ts @@ -1,16 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - \`\${donuts} of 60 Donuts\`} - className="max-w-md" - /> - ); -}`; +import App from "./get-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/hide-thumb.raw.jsx b/apps/docs/content/components/slider/hide-thumb.raw.jsx new file mode 100644 index 000000000..8157e09ed --- /dev/null +++ b/apps/docs/content/components/slider/hide-thumb.raw.jsx @@ -0,0 +1,13 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/hide-thumb.ts b/apps/docs/content/components/slider/hide-thumb.ts index 4be475c9d..bd5db5b62 100644 --- a/apps/docs/content/components/slider/hide-thumb.ts +++ b/apps/docs/content/components/slider/hide-thumb.ts @@ -1,16 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./hide-thumb.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/hide-value.raw.jsx b/apps/docs/content/components/slider/hide-value.raw.jsx new file mode 100644 index 000000000..df98a823a --- /dev/null +++ b/apps/docs/content/components/slider/hide-value.raw.jsx @@ -0,0 +1,16 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/hide-value.ts b/apps/docs/content/components/slider/hide-value.ts index 54d160702..cfd8be722 100644 --- a/apps/docs/content/components/slider/hide-value.ts +++ b/apps/docs/content/components/slider/hide-value.ts @@ -1,19 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./hide-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/marks.raw.jsx b/apps/docs/content/components/slider/marks.raw.jsx new file mode 100644 index 000000000..ff41ef28d --- /dev/null +++ b/apps/docs/content/components/slider/marks.raw.jsx @@ -0,0 +1,28 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/marks.ts b/apps/docs/content/components/slider/marks.ts index 07c7ac65c..cdccdb9ce 100644 --- a/apps/docs/content/components/slider/marks.ts +++ b/apps/docs/content/components/slider/marks.ts @@ -1,31 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./marks.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/outline.raw.jsx b/apps/docs/content/components/slider/outline.raw.jsx new file mode 100644 index 000000000..67d251a4b --- /dev/null +++ b/apps/docs/content/components/slider/outline.raw.jsx @@ -0,0 +1,41 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/slider/outline.ts b/apps/docs/content/components/slider/outline.ts index ec94e797c..08038eb9c 100644 --- a/apps/docs/content/components/slider/outline.ts +++ b/apps/docs/content/components/slider/outline.ts @@ -1,44 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./outline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/radius.raw.jsx b/apps/docs/content/components/slider/radius.raw.jsx new file mode 100644 index 000000000..181343ac1 --- /dev/null +++ b/apps/docs/content/components/slider/radius.raw.jsx @@ -0,0 +1,22 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
    + {radius.map((r) => ( + + ))} +
    + ); +} diff --git a/apps/docs/content/components/slider/radius.ts b/apps/docs/content/components/slider/radius.ts index 6fb5696ad..7b78db1ce 100644 --- a/apps/docs/content/components/slider/radius.ts +++ b/apps/docs/content/components/slider/radius.ts @@ -1,31 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const radius = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
    - {radius.map((r) => ( - - ))} -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/range.raw.jsx b/apps/docs/content/components/slider/range.raw.jsx new file mode 100644 index 000000000..9f733fdbb --- /dev/null +++ b/apps/docs/content/components/slider/range.raw.jsx @@ -0,0 +1,15 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/range.ts b/apps/docs/content/components/slider/range.ts index 9b958ceee..90e4b0519 100644 --- a/apps/docs/content/components/slider/range.ts +++ b/apps/docs/content/components/slider/range.ts @@ -1,18 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./range.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/render-label.raw.jsx b/apps/docs/content/components/slider/render-label.raw.jsx new file mode 100644 index 000000000..2af183ce2 --- /dev/null +++ b/apps/docs/content/components/slider/render-label.raw.jsx @@ -0,0 +1,84 @@ +import {Slider, Tooltip} from "@nextui-org/react"; + +export const InfoIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + ( + + )} + renderThumb={({index, ...props}) => ( +
    + +
    + )} + size="lg" + step={10} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-label.ts b/apps/docs/content/components/slider/render-label.ts index 5248574a7..f4fc289c5 100644 --- a/apps/docs/content/components/slider/render-label.ts +++ b/apps/docs/content/components/slider/render-label.ts @@ -1,91 +1,7 @@ -const InfoIcon = `export const InfoIcon = (props) => ( - -); -`; - -const App = `import {Slider, Tooltip} from "@nextui-org/react"; -import {InfoIcon} from "./InfoIcon"; - -export default function App() { - return ( - ( - - )} - renderThumb={({index, ...props}) => ( -
    - -
    - )} - /> - ); -}`; +import App from "./render-label.raw.jsx?raw"; const react = { "/App.jsx": App, - "/InfoIcon.jsx": InfoIcon, }; export default { diff --git a/apps/docs/content/components/slider/render-range-thumb.raw.jsx b/apps/docs/content/components/slider/render-range-thumb.raw.jsx new file mode 100644 index 000000000..c9b831be3 --- /dev/null +++ b/apps/docs/content/components/slider/render-range-thumb.raw.jsx @@ -0,0 +1,33 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + ( +
    + +
    + )} + size="lg" + step={10} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-range-thumb.ts b/apps/docs/content/components/slider/render-range-thumb.ts index 8f212229c..6745f6159 100644 --- a/apps/docs/content/components/slider/render-range-thumb.ts +++ b/apps/docs/content/components/slider/render-range-thumb.ts @@ -1,36 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - ( -
    - -
    - )} - /> - ); -}`; +import App from "./render-range-thumb.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/render-thumb.raw.jsx b/apps/docs/content/components/slider/render-thumb.raw.jsx new file mode 100644 index 000000000..29657194a --- /dev/null +++ b/apps/docs/content/components/slider/render-thumb.raw.jsx @@ -0,0 +1,24 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + ( +
    + +
    + )} + size="sm" + /> + ); +} diff --git a/apps/docs/content/components/slider/render-thumb.ts b/apps/docs/content/components/slider/render-thumb.ts index 3a020ce67..0198aaa4a 100644 --- a/apps/docs/content/components/slider/render-thumb.ts +++ b/apps/docs/content/components/slider/render-thumb.ts @@ -1,27 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - ( -
    - -
    - )} - /> - ); -}`; +import App from "./render-thumb.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx new file mode 100644 index 000000000..4b548d15a --- /dev/null +++ b/apps/docs/content/components/slider/render-value.raw.jsx @@ -0,0 +1,58 @@ +import {Slider, Tooltip} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0.2); + const [inputValue, setInputValue] = React.useState("0.2"); + + const handleChange = (value) => { + if (isNaN(Number(value))) return; + + setValue(value); + setInputValue(value.toString()); + }; + + return ( + ( + + + { + const v = e.target.value; + + setInputValue(v); + }} + onKeyDown={(e) => { + if (e.key === "Enter" && !isNaN(Number(inputValue))) { + setValue(Number(inputValue)); + } + }} + /> + + + )} + size="sm" + // we extract the default children to render the input + step={0.01} + value={value} + onChange={handleChange} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-value.raw.tsx b/apps/docs/content/components/slider/render-value.raw.tsx new file mode 100644 index 000000000..a51b665be --- /dev/null +++ b/apps/docs/content/components/slider/render-value.raw.tsx @@ -0,0 +1,61 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Tooltip, Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0.2); + const [inputValue, setInputValue] = React.useState("0.2"); + + const handleChange = (value: SliderValue) => { + if (isNaN(Number(value))) return; + + setValue(value); + setInputValue(value.toString()); + }; + + return ( + ( + + + ) => { + const v = e.target.value; + + setInputValue(v); + }} + onKeyDown={(e: React.KeyboardEvent) => { + if (e.key === "Enter" && !isNaN(Number(inputValue))) { + setValue(Number(inputValue)); + } + }} + /> + + + )} + size="sm" + step={0.01} + // we extract the default children to render the input + value={value} + onChange={handleChange} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-value.ts b/apps/docs/content/components/slider/render-value.ts index 09da36972..ab16e1fc2 100644 --- a/apps/docs/content/components/slider/render-value.ts +++ b/apps/docs/content/components/slider/render-value.ts @@ -1,118 +1,5 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0.2); - const [inputValue, setInputValue] = React.useState("0.2"); - - const handleChange = (value) => { - if (isNaN(Number(value))) return; - - setValue(value); - setInputValue(value.toString()); - }; - - return ( - ( - - - { - const v = e.target.value; - - setInputValue(v); - }} - onKeyDown={(e) => { - if (e.key === "Enter" && !isNaN(Number(inputValue))) { - setValue(Number(inputValue)); - } - }} - /> - - - )} - value={value} - onChange={handleChange} - /> - ); -}`; - -const AppTs = `import {Slider, SliderValue} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0.2); - const [inputValue, setInputValue] = React.useState("0.2"); - - const handleChange = (value: SliderValue) => { - if (isNaN(Number(value))) return; - - setValue(value); - setInputValue(value.toString()); - }; - - return ( - ( - - - ) => { - const v = e.target.value; - - setInputValue(v); - }} - onKeyDown={(e: React.KeyboardEvent) => { - if (e.key === "Enter" && !isNaN(Number(inputValue))) { - setValue(Number(inputValue)); - } - }} - /> - - - )} - value={value} - onChange={handleChange} - /> - ); -}`; +import App from "./render-value.raw.jsx?raw"; +import AppTs from "./render-value.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/sizes.raw.jsx b/apps/docs/content/components/slider/sizes.raw.jsx new file mode 100644 index 000000000..26693981b --- /dev/null +++ b/apps/docs/content/components/slider/sizes.raw.jsx @@ -0,0 +1,35 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/slider/sizes.ts b/apps/docs/content/components/slider/sizes.ts index 83741c655..85a2f5b30 100644 --- a/apps/docs/content/components/slider/sizes.ts +++ b/apps/docs/content/components/slider/sizes.ts @@ -1,38 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/start-end-content.raw.jsx b/apps/docs/content/components/slider/start-end-content.raw.jsx new file mode 100644 index 000000000..1b9172bdd --- /dev/null +++ b/apps/docs/content/components/slider/start-end-content.raw.jsx @@ -0,0 +1,67 @@ +import {Slider} from "@nextui-org/react"; + +export const VolumeHighIcon = (props) => { + return ( + + ); +}; + +export const VolumeLowIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + } + size="lg" + startContent={} + /> + ); +} diff --git a/apps/docs/content/components/slider/start-end-content.ts b/apps/docs/content/components/slider/start-end-content.ts index f478eea06..e99c7e599 100644 --- a/apps/docs/content/components/slider/start-end-content.ts +++ b/apps/docs/content/components/slider/start-end-content.ts @@ -1,73 +1,7 @@ -const VolumeHighIcon = `export const VolumeHighIcon = (props) => ( - -);`; - -const VolumeLowIcon = `export const VolumeLowIcon = (props) => ( - -);`; - -const App = `import {Slider} from "@nextui-org/react"; -import {VolumeLowIcon} from "./VolumeLowIcon"; -import {VolumeHighIcon} from "./VolumeHighIcon"; - -export default function App() { - return ( - } - endContent={} - className="max-w-md" - defaultValue={40} - /> - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/VolumeHighIcon.jsx": VolumeHighIcon, - "/VolumeLowIcon.jsx": VolumeLowIcon, }; export default { diff --git a/apps/docs/content/components/slider/tooltip.raw.jsx b/apps/docs/content/components/slider/tooltip.raw.jsx new file mode 100644 index 000000000..5719863d8 --- /dev/null +++ b/apps/docs/content/components/slider/tooltip.raw.jsx @@ -0,0 +1,30 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/tooltip.ts b/apps/docs/content/components/slider/tooltip.ts index bd9752998..d5f80e126 100644 --- a/apps/docs/content/components/slider/tooltip.ts +++ b/apps/docs/content/components/slider/tooltip.ts @@ -1,33 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./tooltip.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/usage.raw.jsx b/apps/docs/content/components/slider/usage.raw.jsx new file mode 100644 index 000000000..960b8c979 --- /dev/null +++ b/apps/docs/content/components/slider/usage.raw.jsx @@ -0,0 +1,14 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/usage.ts b/apps/docs/content/components/slider/usage.ts index 9d2e81ac2..1118304c3 100644 --- a/apps/docs/content/components/slider/usage.ts +++ b/apps/docs/content/components/slider/usage.ts @@ -1,17 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/value-formatting.raw.jsx b/apps/docs/content/components/slider/value-formatting.raw.jsx new file mode 100644 index 000000000..1bd3f0cd2 --- /dev/null +++ b/apps/docs/content/components/slider/value-formatting.raw.jsx @@ -0,0 +1,14 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/value-formatting.ts b/apps/docs/content/components/slider/value-formatting.ts index 096dd9947..0cd558d45 100644 --- a/apps/docs/content/components/slider/value-formatting.ts +++ b/apps/docs/content/components/slider/value-formatting.ts @@ -1,17 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./value-formatting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/vertical.raw.jsx b/apps/docs/content/components/slider/vertical.raw.jsx new file mode 100644 index 000000000..779c0628c --- /dev/null +++ b/apps/docs/content/components/slider/vertical.raw.jsx @@ -0,0 +1,35 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/slider/vertical.ts b/apps/docs/content/components/slider/vertical.ts index f3f7799b1..697ac1034 100644 --- a/apps/docs/content/components/slider/vertical.ts +++ b/apps/docs/content/components/slider/vertical.ts @@ -1,38 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./vertical.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/visible-steps.raw.jsx b/apps/docs/content/components/slider/visible-steps.raw.jsx new file mode 100644 index 000000000..d6e3690ef --- /dev/null +++ b/apps/docs/content/components/slider/visible-steps.raw.jsx @@ -0,0 +1,41 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/slider/visible-steps.ts b/apps/docs/content/components/slider/visible-steps.ts index da06557c7..ae20aa27a 100644 --- a/apps/docs/content/components/slider/visible-steps.ts +++ b/apps/docs/content/components/slider/visible-steps.ts @@ -1,44 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./visible-steps.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/colors.raw.jsx b/apps/docs/content/components/snippet/colors.raw.jsx new file mode 100644 index 000000000..f0f95cee4 --- /dev/null +++ b/apps/docs/content/components/snippet/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( +
    + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
    + ); +} diff --git a/apps/docs/content/components/snippet/colors.ts b/apps/docs/content/components/snippet/colors.ts index e46614cd1..d5bef810a 100644 --- a/apps/docs/content/components/snippet/colors.ts +++ b/apps/docs/content/components/snippet/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( -
    - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/custom-icons.raw.jsx b/apps/docs/content/components/snippet/custom-icons.raw.jsx new file mode 100644 index 000000000..55d638677 --- /dev/null +++ b/apps/docs/content/components/snippet/custom-icons.raw.jsx @@ -0,0 +1,43 @@ +import {Snippet} from "@nextui-org/react"; + +export const CopyIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CheckIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( + } copyIcon={} variant="bordered"> + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/custom-icons.ts b/apps/docs/content/components/snippet/custom-icons.ts index 10bd84d10..7954d4159 100644 --- a/apps/docs/content/components/snippet/custom-icons.ts +++ b/apps/docs/content/components/snippet/custom-icons.ts @@ -1,62 +1,7 @@ -export const CopyIcon = `export const CopyIcon = ({ size, height, width, ...props }) => { - return ( - - - - ); -};`; - -export const CheckIcon = `export const CheckIcon = ({ - size, - height, - width, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Snippet} from "@nextui-org/react"; -import {CopyIcon} from "./CopyIcon"; -import {CheckIcon} from "./CheckIcon"; - -export default function App() { - return ( - } - checkIcon={} - > - npm install @nextui-org/react - - ); -}`; +import App from "./custom-icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CopyIcon.jsx": CopyIcon, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/snippet/custom-tooltip.raw.jsx b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx new file mode 100644 index 000000000..5998d383f --- /dev/null +++ b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx @@ -0,0 +1,17 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/custom-tooltip.ts b/apps/docs/content/components/snippet/custom-tooltip.ts index 60ffed31d..247cbd98d 100644 --- a/apps/docs/content/components/snippet/custom-tooltip.ts +++ b/apps/docs/content/components/snippet/custom-tooltip.ts @@ -1,20 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - - npm install @nextui-org/react - - ); -}`; +import App from "./custom-tooltip.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/multiline.raw.jsx b/apps/docs/content/components/snippet/multiline.raw.jsx new file mode 100644 index 000000000..189857d3b --- /dev/null +++ b/apps/docs/content/components/snippet/multiline.raw.jsx @@ -0,0 +1,11 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + yarn add @nextui-org/react + pnpm add @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/multiline.ts b/apps/docs/content/components/snippet/multiline.ts index 03b960723..a5e525766 100644 --- a/apps/docs/content/components/snippet/multiline.ts +++ b/apps/docs/content/components/snippet/multiline.ts @@ -1,14 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - - npm install @nextui-org/react - yarn add @nextui-org/react - pnpm add @nextui-org/react - - ); -}`; +import App from "./multiline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/sizes.raw.jsx b/apps/docs/content/components/snippet/sizes.raw.jsx new file mode 100644 index 000000000..261e6f098 --- /dev/null +++ b/apps/docs/content/components/snippet/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( +
    + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
    + ); +} diff --git a/apps/docs/content/components/snippet/sizes.ts b/apps/docs/content/components/snippet/sizes.ts index 045600050..85a2f5b30 100644 --- a/apps/docs/content/components/snippet/sizes.ts +++ b/apps/docs/content/components/snippet/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( -
    - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/symbol.raw.jsx b/apps/docs/content/components/snippet/symbol.raw.jsx new file mode 100644 index 000000000..425ff9a9a --- /dev/null +++ b/apps/docs/content/components/snippet/symbol.raw.jsx @@ -0,0 +1,9 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/symbol.ts b/apps/docs/content/components/snippet/symbol.ts index 8215c07fa..414f19996 100644 --- a/apps/docs/content/components/snippet/symbol.ts +++ b/apps/docs/content/components/snippet/symbol.ts @@ -1,10 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - npm install @nextui-org/react - ); -}`; +import App from "./symbol.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/usage.raw.jsx b/apps/docs/content/components/snippet/usage.raw.jsx new file mode 100644 index 000000000..88cb317e6 --- /dev/null +++ b/apps/docs/content/components/snippet/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return npm install @nextui-org/react; +} diff --git a/apps/docs/content/components/snippet/usage.ts b/apps/docs/content/components/snippet/usage.ts index 38c8c5b1c..1118304c3 100644 --- a/apps/docs/content/components/snippet/usage.ts +++ b/apps/docs/content/components/snippet/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - npm install @nextui-org/react - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/variants.raw.jsx b/apps/docs/content/components/snippet/variants.raw.jsx new file mode 100644 index 000000000..86dfb3902 --- /dev/null +++ b/apps/docs/content/components/snippet/variants.raw.jsx @@ -0,0 +1,18 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( +
    + npm install @nextui-org/react + + npm install @nextui-org/react + + + npm install @nextui-org/react + + + npm install @nextui-org/react + +
    + ); +} diff --git a/apps/docs/content/components/snippet/variants.ts b/apps/docs/content/components/snippet/variants.ts index bc2d96bb0..ddea95fb2 100644 --- a/apps/docs/content/components/snippet/variants.ts +++ b/apps/docs/content/components/snippet/variants.ts @@ -1,15 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( -
    - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/without-copy.raw.jsx b/apps/docs/content/components/snippet/without-copy.raw.jsx new file mode 100644 index 000000000..baab96d17 --- /dev/null +++ b/apps/docs/content/components/snippet/without-copy.raw.jsx @@ -0,0 +1,9 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/without-copy.ts b/apps/docs/content/components/snippet/without-copy.ts index 60eceab25..9a8e663e4 100644 --- a/apps/docs/content/components/snippet/without-copy.ts +++ b/apps/docs/content/components/snippet/without-copy.ts @@ -1,12 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - - npm install @nextui-org/react - - ); -}`; +import App from "./without-copy.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spacer/usage.raw.jsx b/apps/docs/content/components/spacer/usage.raw.jsx new file mode 100644 index 000000000..8eb045dd6 --- /dev/null +++ b/apps/docs/content/components/spacer/usage.raw.jsx @@ -0,0 +1,24 @@ +import {Spacer, Card} from "@nextui-org/react"; + +export const CustomCard = () => ( + +
    +
    +
    +
    +
    +
    + +); + +export default function App() { + return ( +
    + + + + + +
    + ); +} diff --git a/apps/docs/content/components/spacer/usage.ts b/apps/docs/content/components/spacer/usage.ts index 92882e0eb..1118304c3 100644 --- a/apps/docs/content/components/spacer/usage.ts +++ b/apps/docs/content/components/spacer/usage.ts @@ -1,34 +1,7 @@ -const CustomCard = `import {Card} from "@nextui-org/react"; - -export const CustomCard = () => ( - -
    -
    -
    -
    -
    -
    -     -);`; - -const App = `import {Spacer} from "@nextui-org/react"; -import {CustomCard} from "./CustomCard"; - -export default function App() { - return ( -
    - - - - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CustomCard.jsx": CustomCard, }; export default { diff --git a/apps/docs/content/components/spinner/colors.raw.jsx b/apps/docs/content/components/spinner/colors.raw.jsx new file mode 100644 index 000000000..61dd419d9 --- /dev/null +++ b/apps/docs/content/components/spinner/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/spinner/colors.ts b/apps/docs/content/components/spinner/colors.ts index 33b27d539..d5bef810a 100644 --- a/apps/docs/content/components/spinner/colors.ts +++ b/apps/docs/content/components/spinner/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/label-colors.raw.jsx b/apps/docs/content/components/spinner/label-colors.raw.jsx new file mode 100644 index 000000000..706793018 --- /dev/null +++ b/apps/docs/content/components/spinner/label-colors.raw.jsx @@ -0,0 +1,14 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + + +
    + ); +} diff --git a/apps/docs/content/components/spinner/label-colors.ts b/apps/docs/content/components/spinner/label-colors.ts index acd289fea..38384cdf0 100644 --- a/apps/docs/content/components/spinner/label-colors.ts +++ b/apps/docs/content/components/spinner/label-colors.ts @@ -1,17 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - - -
    - ); -}`; +import App from "./label-colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/label.raw.jsx b/apps/docs/content/components/spinner/label.raw.jsx new file mode 100644 index 000000000..d7f29abfa --- /dev/null +++ b/apps/docs/content/components/spinner/label.raw.jsx @@ -0,0 +1,5 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/spinner/label.ts b/apps/docs/content/components/spinner/label.ts index 3e08afd96..254b95afb 100644 --- a/apps/docs/content/components/spinner/label.ts +++ b/apps/docs/content/components/spinner/label.ts @@ -1,10 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/sizes.raw.jsx b/apps/docs/content/components/spinner/sizes.raw.jsx new file mode 100644 index 000000000..7e740a9dd --- /dev/null +++ b/apps/docs/content/components/spinner/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + +
    + ); +} diff --git a/apps/docs/content/components/spinner/sizes.ts b/apps/docs/content/components/spinner/sizes.ts index 29c59b2d3..85a2f5b30 100644 --- a/apps/docs/content/components/spinner/sizes.ts +++ b/apps/docs/content/components/spinner/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/usage.raw.jsx b/apps/docs/content/components/spinner/usage.raw.jsx new file mode 100644 index 000000000..0e516c76c --- /dev/null +++ b/apps/docs/content/components/spinner/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/spinner/usage.ts b/apps/docs/content/components/spinner/usage.ts index c61327f31..1118304c3 100644 --- a/apps/docs/content/components/spinner/usage.ts +++ b/apps/docs/content/components/spinner/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/colors.raw.jsx b/apps/docs/content/components/switch/colors.raw.jsx new file mode 100644 index 000000000..569b6eb4a --- /dev/null +++ b/apps/docs/content/components/switch/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Default + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
    + ); +} diff --git a/apps/docs/content/components/switch/colors.ts b/apps/docs/content/components/switch/colors.ts index a3da415b9..d5bef810a 100644 --- a/apps/docs/content/components/switch/colors.ts +++ b/apps/docs/content/components/switch/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Default - Primary - Secondary - Success - Warning - Danger -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/controlled.raw.jsx b/apps/docs/content/components/switch/controlled.raw.jsx new file mode 100644 index 000000000..2e8633b94 --- /dev/null +++ b/apps/docs/content/components/switch/controlled.raw.jsx @@ -0,0 +1,14 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + const [isSelected, setIsSelected] = React.useState(true); + + return ( +
    + + Airplane mode + +

    Selected: {isSelected ? "true" : "false"}

    +
    + ); +} diff --git a/apps/docs/content/components/switch/controlled.ts b/apps/docs/content/components/switch/controlled.ts index b7abbb6ae..2c3f0cacb 100644 --- a/apps/docs/content/components/switch/controlled.ts +++ b/apps/docs/content/components/switch/controlled.ts @@ -1,17 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - const [isSelected, setIsSelected] = React.useState(true); - - return ( -
    - - Airplane mode - -

    Selected: {isSelected ? "true" : "false"}

    -
    - ) -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/custom-impl.raw.jsx b/apps/docs/content/components/switch/custom-impl.raw.jsx new file mode 100644 index 000000000..205a5fcd4 --- /dev/null +++ b/apps/docs/content/components/switch/custom-impl.raw.jsx @@ -0,0 +1,71 @@ +import {VisuallyHidden, useSwitch} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +const ThemeSwitch = (props) => { + const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = + useSwitch(props); + + return ( +
    + + + + +
    + {isSelected ? : } +
    +     +

    Lights: {isSelected ? "on" : "off"}

    +
    + ); +}; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/switch/custom-impl.raw.tsx b/apps/docs/content/components/switch/custom-impl.raw.tsx new file mode 100644 index 000000000..3cd1d1965 --- /dev/null +++ b/apps/docs/content/components/switch/custom-impl.raw.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import {useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +const ThemeSwitch = (props: SwitchProps) => { + const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = + useSwitch(props); + + return ( +
    + + + + +
    + {isSelected ? : } +
    +     +

    Lights: {isSelected ? "on" : "off"}

    +
    + ); +}; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/switch/custom-impl.ts b/apps/docs/content/components/switch/custom-impl.ts index 31bb02960..ef0d8ef53 100644 --- a/apps/docs/content/components/switch/custom-impl.ts +++ b/apps/docs/content/components/switch/custom-impl.ts @@ -1,133 +1,12 @@ -const MoonIcon = `export const MoonIcon = (props) => ( - -);`; - -const SunIcon = `export const SunIcon = (props) => ( - -);`; - -const App = `import {Switch, VisuallyHidden, useSwitch} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -const ThemeSwitch = (props) => { - const { - Component, - slots, - isSelected, - getBaseProps, - getInputProps, - getWrapperProps - } = useSwitch(props); - - return ( -
    - - - - -
    - {isSelected ? : } -
    -     -

    Lights: {isSelected ? "on" : "off"}

    -
    - ) -} - - -export default function App() { - return -}`; - -const AppTs = `import {Switch, useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -const ThemeSwitch = (props: SwitchProps) => { - const { - Component, - slots, - isSelected, - getBaseProps, - getInputProps, - getWrapperProps - } = useSwitch(props); - - return ( -
    - - - - -
    - {isSelected ? : } -
    -     -

    Lights: {isSelected ? "on" : "off"}

    -
    - ) -} - - -export default function App() { - return -}`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, - "/MoonIcon.jsx": MoonIcon, - "/SunIcon.jsx": SunIcon, }; const reactTs = { "/App.tsx": AppTs, - "/MoonIcon.tsx": MoonIcon, - "/SunIcon.tsx": SunIcon, }; export default { diff --git a/apps/docs/content/components/switch/custom-styles.raw.jsx b/apps/docs/content/components/switch/custom-styles.raw.jsx new file mode 100644 index 000000000..db7a3568c --- /dev/null +++ b/apps/docs/content/components/switch/custom-styles.raw.jsx @@ -0,0 +1,32 @@ +import {Switch, cn} from "@nextui-org/react"; + +export default function App() { + return ( + +
    +

    Enable early access

    +

    + Get access to new features before they are released. +

    +
    +     + ); +} diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts index c4470a56e..da3ea9093 100644 --- a/apps/docs/content/components/switch/custom-styles.ts +++ b/apps/docs/content/components/switch/custom-styles.ts @@ -1,34 +1,4 @@ -const App = `import {Switch, cn} from "@nextui-org/react"; - -export default function App() { - return ( - -
    -

    Enable early access

    -

    - Get access to new features before they are released. -

    -
    -     - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/disabled.raw.jsx b/apps/docs/content/components/switch/disabled.raw.jsx new file mode 100644 index 000000000..146c57ed3 --- /dev/null +++ b/apps/docs/content/components/switch/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ( + + Automatic updates + + ); +} diff --git a/apps/docs/content/components/switch/disabled.ts b/apps/docs/content/components/switch/disabled.ts index 5914c616b..1a215cc91 100644 --- a/apps/docs/content/components/switch/disabled.ts +++ b/apps/docs/content/components/switch/disabled.ts @@ -1,12 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( - - Automatic updates - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/icons.raw.jsx b/apps/docs/content/components/switch/icons.raw.jsx new file mode 100644 index 000000000..ce9264d15 --- /dev/null +++ b/apps/docs/content/components/switch/icons.raw.jsx @@ -0,0 +1,53 @@ +import {Switch} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + } + size="lg" + startContent={} + > + Dark mode + + ); +} diff --git a/apps/docs/content/components/switch/icons.ts b/apps/docs/content/components/switch/icons.ts index 3f3d9fcf1..22a410c88 100644 --- a/apps/docs/content/components/switch/icons.ts +++ b/apps/docs/content/components/switch/icons.ts @@ -1,59 +1,7 @@ -const MoonIcon = `export const MoonIcon = (props) => ( - -);`; - -const SunIcon = `export const SunIcon = (props) => ( - -);`; - -const App = `import {Switch} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -export default function App() { - return ( - } - endContent={} - > - Dark mode - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MoonIcon.jsx": MoonIcon, - "/SunIcon.jsx": SunIcon, }; export default { diff --git a/apps/docs/content/components/switch/label.raw.jsx b/apps/docs/content/components/switch/label.raw.jsx new file mode 100644 index 000000000..c349c1b53 --- /dev/null +++ b/apps/docs/content/components/switch/label.raw.jsx @@ -0,0 +1,5 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return Automatic updates; +} diff --git a/apps/docs/content/components/switch/label.ts b/apps/docs/content/components/switch/label.ts index c9786705f..254b95afb 100644 --- a/apps/docs/content/components/switch/label.ts +++ b/apps/docs/content/components/switch/label.ts @@ -1,12 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( - - Automatic updates - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/sizes.raw.jsx b/apps/docs/content/components/switch/sizes.raw.jsx new file mode 100644 index 000000000..36dbbb9b4 --- /dev/null +++ b/apps/docs/content/components/switch/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + Small + + + Medium + + + Large + +
    + ); +} diff --git a/apps/docs/content/components/switch/sizes.ts b/apps/docs/content/components/switch/sizes.ts index 8a8b6f4f1..85a2f5b30 100644 --- a/apps/docs/content/components/switch/sizes.ts +++ b/apps/docs/content/components/switch/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( -
    - Small - Medium - Large -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/thumb-icon.raw.jsx b/apps/docs/content/components/switch/thumb-icon.raw.jsx new file mode 100644 index 000000000..aa55ff9c3 --- /dev/null +++ b/apps/docs/content/components/switch/thumb-icon.raw.jsx @@ -0,0 +1,54 @@ +import {Switch} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + isSelected ? : + } + > + Dark mode + + ); +} diff --git a/apps/docs/content/components/switch/thumb-icon.ts b/apps/docs/content/components/switch/thumb-icon.ts index 41746fa90..4201c3f43 100644 --- a/apps/docs/content/components/switch/thumb-icon.ts +++ b/apps/docs/content/components/switch/thumb-icon.ts @@ -1,64 +1,7 @@ -const MoonIcon = `export const MoonIcon = (props) => ( - -);`; - -const SunIcon = `export const SunIcon = (props) => ( - -);`; - -const App = `import {Switch} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -export default function App() { - return ( - - isSelected ? ( - - ) : ( - - ) - } - > - Dark mode - - ); -}`; +import App from "./thumb-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MoonIcon.jsx": MoonIcon, - "/SunIcon.jsx": SunIcon, }; export default { diff --git a/apps/docs/content/components/switch/usage.raw.jsx b/apps/docs/content/components/switch/usage.raw.jsx new file mode 100644 index 000000000..434305473 --- /dev/null +++ b/apps/docs/content/components/switch/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/switch/usage.ts b/apps/docs/content/components/switch/usage.ts index e76fed14c..1118304c3 100644 --- a/apps/docs/content/components/switch/usage.ts +++ b/apps/docs/content/components/switch/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/async-pagination.raw.jsx b/apps/docs/content/components/table/async-pagination.raw.jsx new file mode 100644 index 000000000..266a97e84 --- /dev/null +++ b/apps/docs/content/components/table/async-pagination.raw.jsx @@ -0,0 +1,69 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Pagination, + Spinner, + getKeyValue, +} from "@nextui-org/react"; +import useSWR from "swr"; + +const fetcher = (...args) => fetch(...args).then((res) => res.json()); + +export default function App() { + const [page, setPage] = React.useState(1); + + const {data, isLoading} = useSWR(`https://swapi.py4e.com/api/people?page=${page}`, fetcher, { + keepPreviousData: true, + }); + + const rowsPerPage = 10; + + const pages = React.useMemo(() => { + return data?.count ? Math.ceil(data.count / rowsPerPage) : 0; + }, [data?.count, rowsPerPage]); + + const loadingState = isLoading || data?.results.length === 0 ? "loading" : "idle"; + + return ( + 0 ? ( +
    + setPage(page)} + /> +
    + ) : null + } + > + + Name + Height + Mass + Birth year + + } + loadingState={loadingState} + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/async-pagination.ts b/apps/docs/content/components/table/async-pagination.ts index f5c51a3c4..f59ac27a4 100644 --- a/apps/docs/content/components/table/async-pagination.ts +++ b/apps/docs/content/components/table/async-pagination.ts @@ -1,62 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react"; -import useSWR from "swr"; - -const fetcher = (...args) => fetch(...args).then((res) => res.json()); - -export default function App() { - const [page, setPage] = React.useState(1); - - const {data, isLoading} = useSWR(\`https://swapi.py4e.com/api/people?page=\$\{page\}\`, fetcher, { - keepPreviousData: true, - }); - - const rowsPerPage = 10; - - const pages = React.useMemo(() => { - return data?.count ? Math.ceil(data.count / rowsPerPage) : 0; - }, [data?.count, rowsPerPage]); - - const loadingState = isLoading || data?.results.length === 0 ? "loading" : "idle"; - - return ( - 0 ? ( -
    - setPage(page)} - /> -
    - ) : null - } - > - - Name - Height - Mass - Birth year - - } - loadingState={loadingState} - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./async-pagination.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/controlled-selection.raw.jsx b/apps/docs/content/components/table/controlled-selection.raw.jsx new file mode 100644 index 000000000..3ee296f7b --- /dev/null +++ b/apps/docs/content/components/table/controlled-selection.raw.jsx @@ -0,0 +1,75 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); + + return ( + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/controlled-selection.ts b/apps/docs/content/components/table/controlled-selection.ts index 0a54c2bd2..b141b8189 100644 --- a/apps/docs/content/components/table/controlled-selection.ts +++ b/apps/docs/content/components/table/controlled-selection.ts @@ -1,70 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); - - return ( - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./controlled-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/custom-cells.raw.jsx b/apps/docs/content/components/table/custom-cells.raw.jsx new file mode 100644 index 000000000..e29158dae --- /dev/null +++ b/apps/docs/content/components/table/custom-cells.raw.jsx @@ -0,0 +1,271 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + User, + Chip, + Tooltip, +} from "@nextui-org/react"; + +export const columns = [ + {name: "NAME", uid: "name"}, + {name: "ROLE", uid: "role"}, + {name: "STATUS", uid: "status"}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Technical Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Senior Developer", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "Community Manager", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "Sales Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, +]; + +export const EyeIcon = (props) => { + return ( + + ); +}; + +export const DeleteIcon = (props) => { + return ( + + ); +}; + +export const EditIcon = (props) => { + return ( + + ); +}; + +const statusColorMap = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +export default function App() { + const renderCell = React.useCallback((user, columnKey) => { + const cellValue = user[columnKey]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
    +

    {cellValue}

    +

    {user.team}

    +
    + ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
    + + + + + + + + + + + + + + + +
    + ); + default: + return cellValue; + } + }, []); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/custom-cells.raw.tsx b/apps/docs/content/components/table/custom-cells.raw.tsx new file mode 100644 index 000000000..46ff88e48 --- /dev/null +++ b/apps/docs/content/components/table/custom-cells.raw.tsx @@ -0,0 +1,278 @@ +import React, {SVGProps} from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + User, + Chip, + Tooltip, + ChipProps, +} from "@nextui-org/react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export const columns = [ + {name: "NAME", uid: "name"}, + {name: "ROLE", uid: "role"}, + {name: "STATUS", uid: "status"}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Technical Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Senior Developer", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "Community Manager", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "Sales Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, +]; + +export const EyeIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const DeleteIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const EditIcon = (props: IconSvgProps) => { + return ( + + ); +}; +const statusColorMap: Record = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +type User = (typeof users)[0]; + +export default function App() { + const renderCell = React.useCallback((user: User, columnKey: React.Key) => { + const cellValue = user[columnKey as keyof User]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
    +

    {cellValue}

    +

    {user.team}

    +
    + ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
    + + + + + + + + + + + + + + + +
    + ); + default: + return cellValue; + } + }, []); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts index 92680efd5..9b7f20729 100644 --- a/apps/docs/content/components/table/custom-cells.ts +++ b/apps/docs/content/components/table/custom-cells.ts @@ -1,366 +1,12 @@ -const data = `const columns = [ - {name: "NAME", uid: "name"}, - {name: "ROLE", uid: "role"}, - {name: "STATUS", uid: "status"}, - {name: "ACTIONS", uid: "actions"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Technical Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Senior Developer", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "Community Manager", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "Sales Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, -]; - -export {columns, users};`; - -const EyeIcon = `export const EyeIcon = (props) => ( - -);`; - -const DeleteIcon = `export const DeleteIcon = (props) => ( - -);`; - -const EditIcon = `export const EditIcon = (props) => ( - -);`; - -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip, Tooltip, getKeyValue} from "@nextui-org/react"; -import {EditIcon} from "./EditIcon"; -import {DeleteIcon} from "./DeleteIcon"; -import {EyeIcon} from "./EyeIcon"; -import {columns, users} from "./data"; - -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -export default function App() { - const renderCell = React.useCallback((user, columnKey) => { - const cellValue = user[columnKey]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
    -

    {cellValue}

    -

    {user.team}

    -
    - ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
    - - - - - - - - - - - - - - - -
    - ); - default: - return cellValue; - } - }, []); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
    - ); -}`; - -const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip, Tooltip, ChipProps, getKeyValue} from "@nextui-org/react"; -import {EditIcon} from "./EditIcon"; -import {DeleteIcon} from "./DeleteIcon"; -import {EyeIcon} from "./EyeIcon"; -import {columns, users} from "./data"; - -const statusColorMap: Record = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -type User = typeof users[0]; - -export default function App() { - const renderCell = React.useCallback((user: User, columnKey: React.Key) => { - const cellValue = user[columnKey as keyof User]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
    -

    {cellValue}

    -

    {user.team}

    -
    - ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
    - - - - - - - - - - - - - - - -
    - ); - default: - return cellValue; - } - }, []); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./custom-cells.raw.jsx?raw"; +import AppTs from "./custom-cells.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/EditIcon.jsx": EditIcon, - "/DeleteIcon.jsx": DeleteIcon, - "/EyeIcon.jsx": EyeIcon, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, - "/EditIcon.jsx": EditIcon, - "/DeleteIcon.jsx": DeleteIcon, - "/EyeIcon.jsx": EyeIcon, }; export default { diff --git a/apps/docs/content/components/table/custom-styles.raw.jsx b/apps/docs/content/components/table/custom-styles.raw.jsx new file mode 100644 index 000000000..f00049bb6 --- /dev/null +++ b/apps/docs/content/components/table/custom-styles.raw.jsx @@ -0,0 +1,662 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, +} from "@nextui-org/react"; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => { + return ( + + ); +}; + +const statusColorMap = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + const [page, setPage] = React.useState(1); + + const pages = Math.ceil(users.length / rowsPerPage); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a, b) => { + const first = a[sortDescriptor.column]; + const second = b[sortDescriptor.column]; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user, columnKey) => { + const cellValue = user[columnKey]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
    +

    {cellValue}

    +

    {user.team}

    +
    + ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
    + + + + + + View + Edit + Delete + + +
    + ); + default: + return cellValue; + } + }, []); + + const onRowsPerPageChange = React.useCallback((e) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const topContent = React.useMemo(() => { + return ( +
    +
    + } + value={filterValue} + variant="bordered" + onClear={() => setFilterValue("")} + onValueChange={onSearchChange} + /> +
    + + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
    +
    +
    + Total {users.length} users + +
    +
    + ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onSearchChange, + onRowsPerPageChange, + users.length, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
    + + + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${items.length} selected`} + +
    + ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + const classNames = React.useMemo( + () => ({ + wrapper: ["max-h-[382px]", "max-w-3xl"], + th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], + td: [ + // changing the rows border radius + // first + "group-data-[first=true]/tr:first:before:rounded-none", + "group-data-[first=true]/tr:last:before:rounded-none", + // middle + "group-data-[middle=true]/tr:before:rounded-none", + // last + "group-data-[last=true]/tr:first:before:rounded-none", + "group-data-[last=true]/tr:last:before:rounded-none", + ], + }), + [], + ); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/custom-styles.raw.tsx b/apps/docs/content/components/table/custom-styles.raw.tsx new file mode 100644 index 000000000..4529846f5 --- /dev/null +++ b/apps/docs/content/components/table/custom-styles.raw.tsx @@ -0,0 +1,674 @@ +import React, {SVGProps} from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, + Selection, + ChipProps, + SortDescriptor, +} from "@nextui-org/react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const SearchIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => { + return ( + + ); +}; + +const statusColorMap: Record = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +type User = (typeof users)[0]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState( + new Set(INITIAL_VISIBLE_COLUMNS), + ); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + const [page, setPage] = React.useState(1); + + const pages = Math.ceil(users.length / rowsPerPage); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a: User, b: User) => { + const first = a[sortDescriptor.column as keyof User] as number; + const second = b[sortDescriptor.column as keyof User] as number; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user: User, columnKey: React.Key) => { + const cellValue = user[columnKey as keyof User]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
    +

    {cellValue}

    +

    {user.team}

    +
    + ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
    + + + + + + View + Edit + Delete + + +
    + ); + default: + return cellValue; + } + }, []); + + const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value?: string) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const topContent = React.useMemo(() => { + return ( +
    +
    + } + value={filterValue} + variant="bordered" + onClear={() => setFilterValue("")} + onValueChange={onSearchChange} + /> +
    + + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
    +
    +
    + Total {users.length} users + +
    +
    + ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onSearchChange, + onRowsPerPageChange, + users.length, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
    + + + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${items.length} selected`} + +
    + ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + const classNames = React.useMemo( + () => ({ + wrapper: ["max-h-[382px]", "max-w-3xl"], + th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], + td: [ + // changing the rows border radius + // first + "group-data-[first=true]/tr:first:before:rounded-none", + "group-data-[first=true]/tr:last:before:rounded-none", + // middle + "group-data-[middle=true]/tr:before:rounded-none", + // last + "group-data-[last=true]/tr:first:before:rounded-none", + "group-data-[last=true]/tr:last:before:rounded-none", + ], + }), + [], + ); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/custom-styles.ts b/apps/docs/content/components/table/custom-styles.ts index 3e816ef9e..29cf5fd0e 100644 --- a/apps/docs/content/components/table/custom-styles.ts +++ b/apps/docs/content/components/table/custom-styles.ts @@ -1,1034 +1,8 @@ -const data = `const columns = [ - {name: "ID", uid: "id", sortable: true}, - {name: "NAME", uid: "name", sortable: true}, - {name: "AGE", uid: "age", sortable: true}, - {name: "ROLE", uid: "role", sortable: true}, - {name: "TEAM", uid: "team"}, - {name: "EMAIL", uid: "email"}, - {name: "STATUS", uid: "status", sortable: true}, - {name: "ACTIONS", uid: "actions"}, -]; - -const statusOptions = [ - {name: "Active", uid: "active"}, - {name: "Paused", uid: "paused"}, - {name: "Vacation", uid: "vacation"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://i.pravatar.cc/150?img=4", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://i.pravatar.cc/150?img=5", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?img=8", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://i.pravatar.cc/150?img=10", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://i.pravatar.cc/150?img=12", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://i.pravatar.cc/150?img=16", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://i.pravatar.cc/150?img=15", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?img=20", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://i.pravatar.cc/150?img=33", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://i.pravatar.cc/150?img=29", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://i.pravatar.cc/150?img=50", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://i.pravatar.cc/150?img=45", - email: "mia.robinson@example.com", - }, -]; - -export {columns, users, statusOptions};`; - -const utils = `export function capitalize(s) { - return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; -}`; - -const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const VerticalDotsIcon = `export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => ( - -);`; - -const App = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {SearchIcon} from "./SearchIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - const [page, setPage] = React.useState(1); - - const pages = Math.ceil(users.length / rowsPerPage); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a, b) => { - const first = a[sortDescriptor.column]; - const second = b[sortDescriptor.column]; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user, columnKey) => { - const cellValue = user[columnKey]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
    -

    {cellValue}

    -

    {user.team}

    -
    - ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
    - - - - - - View - Edit - Delete - - -
    - ); - default: - return cellValue; - } - }, []); - - const onRowsPerPageChange = React.useCallback((e) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - - const onSearchChange = React.useCallback((value) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const topContent = React.useMemo(() => { - return ( -
    -
    - } - value={filterValue} - variant="bordered" - onClear={() => setFilterValue("")} - onValueChange={onSearchChange} - /> -
    - - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
    -
    -
    - Total {users.length} users - -
    -
    - ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onSearchChange, - onRowsPerPageChange, - users.length, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
    - - - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${items.length} selected\`} - -
    - ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - const classNames = React.useMemo( - () => ({ - wrapper: ["max-h-[382px]", "max-w-3xl"], - th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], - td: [ - // changing the rows border radius - // first - "group-data-[first=true]:first:before:rounded-none", - "group-data-[first=true]:last:before:rounded-none", - // middle - "group-data-[middle=true]:before:rounded-none", - // last - "group-data-[last=true]:first:before:rounded-none", - "group-data-[last=true]:last:before:rounded-none", - ], - }), - [], - ); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
    - ); -}`; - -const AppTs = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, - Selection, - ChipProps, - SortDescriptor -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {SearchIcon} from "./SearchIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap: Record = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -type User = typeof users[0]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - const [page, setPage] = React.useState(1); - - const pages = Math.ceil(users.length / rowsPerPage); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a: User, b: User) => { - const first = a[sortDescriptor.column as keyof User] as number; - const second = b[sortDescriptor.column as keyof User] as number; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user: User, columnKey: React.Key) => { - const cellValue = user[columnKey as keyof User]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
    -

    {cellValue}

    -

    {user.team}

    -
    - ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
    - - - - - - View - Edit - Delete - - -
    - ); - default: - return cellValue; - } - }, []); - - - const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - const onSearchChange = React.useCallback((value?: string) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const topContent = React.useMemo(() => { - return ( -
    -
    - } - value={filterValue} - variant="bordered" - onClear={() => setFilterValue("")} - onValueChange={onSearchChange} - /> -
    - - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
    -
    -
    - Total {users.length} users - -
    -
    - ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onSearchChange, - onRowsPerPageChange, - users.length, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
    - - - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${items.length} selected\`} - -
    - ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - const classNames = React.useMemo( - () => ({ - wrapper: ["max-h-[382px]", "max-w-3xl"], - th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], - td: [ - // changing the rows border radius - // first - "group-data-[first=true]:first:before:rounded-none", - "group-data-[first=true]:last:before:rounded-none", - // middle - "group-data-[middle=true]:before:rounded-none", - // last - "group-data-[last=true]:first:before:rounded-none", - "group-data-[last=true]:last:before:rounded-none", - ], - }), - [], - ); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; +import AppTs from "./custom-styles.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/utils.js": utils, - "/PlusIcon.jsx": PlusIcon, - "/VerticalDotsIcon.jsx": VerticalDotsIcon, - "/SearchIcon.jsx": SearchIcon, - "/ChevronDownIcon.jsx": ChevronDownIcon, }; const reactTs = { diff --git a/apps/docs/content/components/table/disabled-rows.raw.jsx b/apps/docs/content/components/table/disabled-rows.raw.jsx new file mode 100644 index 000000000..2866f2b0a --- /dev/null +++ b/apps/docs/content/components/table/disabled-rows.raw.jsx @@ -0,0 +1,76 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); + + return ( + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/disabled-rows.ts b/apps/docs/content/components/table/disabled-rows.ts index bdb9ba21f..c619fe06f 100644 --- a/apps/docs/content/components/table/disabled-rows.ts +++ b/apps/docs/content/components/table/disabled-rows.ts @@ -1,71 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); - - return ( - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./disabled-rows.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/disallow-empty-selection.raw.jsx b/apps/docs/content/components/table/disallow-empty-selection.raw.jsx new file mode 100644 index 000000000..14a5db704 --- /dev/null +++ b/apps/docs/content/components/table/disallow-empty-selection.raw.jsx @@ -0,0 +1,68 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + return ( +
    + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + + {colors.map((color) => ( + + {color} + + ))} + +
    + ); +} diff --git a/apps/docs/content/components/table/disallow-empty-selection.ts b/apps/docs/content/components/table/disallow-empty-selection.ts index 474b257da..a1abceee1 100644 --- a/apps/docs/content/components/table/disallow-empty-selection.ts +++ b/apps/docs/content/components/table/disallow-empty-selection.ts @@ -1,67 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react"; - -const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); - - return ( -
    - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - - {colors.map((color) => ( - - {color} - - ))} - -
    - ); -}`; +import App from "./disallow-empty-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/dynamic.raw.jsx b/apps/docs/content/components/table/dynamic.raw.jsx new file mode 100644 index 000000000..a6e733dd1 --- /dev/null +++ b/apps/docs/content/components/table/dynamic.raw.jsx @@ -0,0 +1,68 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + return ( + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/dynamic.ts b/apps/docs/content/components/table/dynamic.ts index bf20c16d5..5d3c97bb9 100644 --- a/apps/docs/content/components/table/dynamic.ts +++ b/apps/docs/content/components/table/dynamic.ts @@ -1,63 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - return ( - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/empty.raw.jsx b/apps/docs/content/components/table/empty.raw.jsx new file mode 100644 index 000000000..2d27a1070 --- /dev/null +++ b/apps/docs/content/components/table/empty.raw.jsx @@ -0,0 +1,14 @@ +import {Table, TableHeader, TableColumn, TableBody} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + {[]} +
    + ); +} diff --git a/apps/docs/content/components/table/empty.ts b/apps/docs/content/components/table/empty.ts index 1a6e0ced1..962836358 100644 --- a/apps/docs/content/components/table/empty.ts +++ b/apps/docs/content/components/table/empty.ts @@ -1,17 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - {[]} -
    - ); -}`; +import App from "./empty.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/infinite-pagination.raw.jsx b/apps/docs/content/components/table/infinite-pagination.raw.jsx new file mode 100644 index 000000000..2af4de320 --- /dev/null +++ b/apps/docs/content/components/table/infinite-pagination.raw.jsx @@ -0,0 +1,76 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Spinner, + getKeyValue, +} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + const [isLoading, setIsLoading] = React.useState(true); + const [hasMore, setHasMore] = React.useState(false); + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + setIsLoading(false); + } + + // If no cursor is available, then we're loading the first page. + // Otherwise, the cursor is the next URL to load, as returned from the previous page. + const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); + let json = await res.json(); + + setHasMore(json.next !== null); + + return { + items: json.results, + cursor: json.next, + }; + }, + }); + + const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore}); + + return ( + + + + ) : null + } + classNames={{ + base: "max-h-[520px] overflow-scroll", + table: "min-h-[400px]", + }} + > + + Name + Height + Mass + Birth year + + } + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/infinite-pagination.raw.tsx b/apps/docs/content/components/table/infinite-pagination.raw.tsx new file mode 100644 index 000000000..4d69e3334 --- /dev/null +++ b/apps/docs/content/components/table/infinite-pagination.raw.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Spinner, + getKeyValue, +} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; +import {useAsyncList} from "@react-stately/data"; + +interface SWCharacter { + name: string; + height: string; + mass: string; + birth_year: string; +} + +export default function App() { + const [isLoading, setIsLoading] = React.useState(true); + const [hasMore, setHasMore] = React.useState(false); + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + setIsLoading(false); + } + + // If no cursor is available, then we're loading the first page. + // Otherwise, the cursor is the next URL to load, as returned from the previous page. + const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); + let json = await res.json(); + + setHasMore(json.next !== null); + + return { + items: json.results, + cursor: json.next, + }; + }, + }); + + const [loaderRef, scrollerRef] = useInfiniteScroll({ + hasMore, + onLoadMore: list.loadMore, + }); + + return ( + + + + ) : null + } + classNames={{ + base: "max-h-[520px] overflow-scroll", + table: "min-h-[400px]", + }} + > + + Name + Height + Mass + Birth year + + } + > + {(item: SWCharacter) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/infinite-pagination.ts b/apps/docs/content/components/table/infinite-pagination.ts index 145813869..cdee063a6 100644 --- a/apps/docs/content/components/table/infinite-pagination.ts +++ b/apps/docs/content/components/table/infinite-pagination.ts @@ -1,154 +1,5 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react"; -import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - const [isLoading, setIsLoading] = React.useState(true); - const [hasMore, setHasMore] = React.useState(false); - - let list = useAsyncList({ - async load({signal, cursor}) { - - if (cursor) { - setIsLoading(false); - } - - // If no cursor is available, then we're loading the first page. - // Otherwise, the cursor is the next URL to load, as returned from the previous page. - const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); - let json = await res.json(); - - setHasMore(json.next !== null); - - return { - items: json.results, - cursor: json.next, - }; - }, - }); - - const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore}); - - return ( - - - - ) : null - } - classNames={{ - base: "max-h-[520px] overflow-scroll", - table: "min-h-[400px]", - }} - > - - Name - Height - Mass - Birth year - - } - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; - -const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react"; -import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll"; -import { useAsyncList } from "@react-stately/data"; - -interface SWCharacter { - name: string; - height: string; - mass: string; - birth_year: string; -} - -export default function App() { - const [isLoading, setIsLoading] = React.useState(true); - const [hasMore, setHasMore] = React.useState(false); - - let list = useAsyncList({ - async load({ signal, cursor }) { - if (cursor) { - setIsLoading(false); - } - - // If no cursor is available, then we're loading the first page. - // Otherwise, the cursor is the next URL to load, as returned from the previous page. - const res = await fetch( - cursor || "https://swapi.py4e.com/api/people/?search=", - { signal } - ); - let json = await res.json(); - - setHasMore(json.next !== null); - - return { - items: json.results, - cursor: json.next, - }; - }, - }); - - const [loaderRef, scrollerRef] = useInfiniteScroll({ - hasMore, - onLoadMore: list.loadMore, - }); - - return ( - - - - ) : null - } - classNames={{ - base: "max-h-[520px] overflow-scroll", - table: "min-h-[400px]", - }} - > - - Name - Height - Mass - Birth year - - } - > - {(item: SWCharacter) => ( - - {(columnKey) => ( - {getKeyValue(item, columnKey)} - )} - - )} - -
    - ); -}`; +import App from "./infinite-pagination.raw.jsx?raw"; +import AppTs from "./infinite-pagination.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/load-more.raw.jsx b/apps/docs/content/components/table/load-more.raw.jsx new file mode 100644 index 000000000..a01198505 --- /dev/null +++ b/apps/docs/content/components/table/load-more.raw.jsx @@ -0,0 +1,80 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Spinner, + Button, +} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + const [page, setPage] = React.useState(1); + const [isLoading, setIsLoading] = React.useState(true); + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + setPage((prev) => prev + 1); + } + + // If no cursor is available, then we're loading the first page. + // Otherwise, the cursor is the next URL to load, as returned from the previous page. + const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); + let json = await res.json(); + + if (!cursor) { + setIsLoading(false); + } + + return { + items: json.results, + cursor: json.next, + }; + }, + }); + + const hasMore = page < 9; + + return ( + + + + ) : null + } + classNames={{ + base: "max-h-[520px] overflow-scroll", + table: "min-h-[420px]", + }} + > + + Name + Height + Mass + Birth year + + } + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/load-more.ts b/apps/docs/content/components/table/load-more.ts index 70e8cd382..872717cc0 100644 --- a/apps/docs/content/components/table/load-more.ts +++ b/apps/docs/content/components/table/load-more.ts @@ -1,73 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Spinner, Button} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - const [page, setPage] = React.useState(1); - const [isLoading, setIsLoading] = React.useState(true); - - let list = useAsyncList({ - async load({signal, cursor}) { - if (cursor) { - setPage((prev) => prev + 1); - } - - // If no cursor is available, then we're loading the first page. - // Otherwise, the cursor is the next URL to load, as returned from the previous page. - const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); - let json = await res.json(); - - if (!cursor) { - setIsLoading(false); - } - - return { - items: json.results, - cursor: json.next, - }; - }, - }); - - const hasMore = page < 9; - - return ( - - - - ) : null - } - classNames={{ - base: "max-h-[520px] overflow-scroll", - table: "min-h-[420px]", - }} - > - - Name - Height - Mass - Birth year - - } - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./load-more.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/multiple-selection.raw.jsx b/apps/docs/content/components/table/multiple-selection.raw.jsx new file mode 100644 index 000000000..e6abd5b42 --- /dev/null +++ b/apps/docs/content/components/table/multiple-selection.raw.jsx @@ -0,0 +1,67 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + return ( +
    + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + + {colors.map((color) => ( + + {color} + + ))} + +
    + ); +} diff --git a/apps/docs/content/components/table/multiple-selection.ts b/apps/docs/content/components/table/multiple-selection.ts index e5be5d114..f03bb84fb 100644 --- a/apps/docs/content/components/table/multiple-selection.ts +++ b/apps/docs/content/components/table/multiple-selection.ts @@ -1,66 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react"; - -const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); - - return ( -
    - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - - {colors.map((color) => ( - - {color} - - ))} - -
    - ); -}`; +import App from "./multiple-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/paginated.raw.jsx b/apps/docs/content/components/table/paginated.raw.jsx new file mode 100644 index 000000000..962c2dfdd --- /dev/null +++ b/apps/docs/content/components/table/paginated.raw.jsx @@ -0,0 +1,212 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Pagination, + getKeyValue, +} from "@nextui-org/react"; + +export const users = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, + { + key: "5", + name: "Emily Collins", + role: "Marketing Manager", + status: "Active", + }, + { + key: "6", + name: "Brian Kim", + role: "Product Manager", + status: "Active", + }, + { + key: "7", + name: "Laura Thompson", + role: "UX Designer", + status: "Active", + }, + { + key: "8", + name: "Michael Stevens", + role: "Data Analyst", + status: "Paused", + }, + { + key: "9", + name: "Sophia Nguyen", + role: "Quality Assurance", + status: "Active", + }, + { + key: "10", + name: "James Wilson", + role: "Front-end Developer", + status: "Vacation", + }, + { + key: "11", + name: "Ava Johnson", + role: "Back-end Developer", + status: "Active", + }, + { + key: "12", + name: "Isabella Smith", + role: "Graphic Designer", + status: "Active", + }, + { + key: "13", + name: "Oliver Brown", + role: "Content Writer", + status: "Paused", + }, + { + key: "14", + name: "Lucas Jones", + role: "Project Manager", + status: "Active", + }, + { + key: "15", + name: "Grace Davis", + role: "HR Manager", + status: "Active", + }, + { + key: "16", + name: "Elijah Garcia", + role: "Network Administrator", + status: "Active", + }, + { + key: "17", + name: "Emma Martinez", + role: "Accountant", + status: "Vacation", + }, + { + key: "18", + name: "Benjamin Lee", + role: "Operations Manager", + status: "Active", + }, + { + key: "19", + name: "Mia Hernandez", + role: "Sales Manager", + status: "Paused", + }, + { + key: "20", + name: "Daniel Lewis", + role: "DevOps Engineer", + status: "Active", + }, + { + key: "21", + name: "Amelia Clark", + role: "Social Media Specialist", + status: "Active", + }, + { + key: "22", + name: "Jackson Walker", + role: "Customer Support", + status: "Active", + }, + { + key: "23", + name: "Henry Hall", + role: "Security Analyst", + status: "Active", + }, + { + key: "24", + name: "Charlotte Young", + role: "PR Specialist", + status: "Paused", + }, + { + key: "25", + name: "Liam King", + role: "Mobile App Developer", + status: "Active", + }, +]; + +export default function App() { + const [page, setPage] = React.useState(1); + const rowsPerPage = 4; + + const pages = Math.ceil(users.length / rowsPerPage); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return users.slice(start, end); + }, [page, users]); + + return ( + + setPage(page)} + /> + + } + classNames={{ + wrapper: "min-h-[222px]", + }} + > + + NAME + ROLE + STATUS + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/paginated.ts b/apps/docs/content/components/table/paginated.ts index 75be89dc5..557add2fc 100644 --- a/apps/docs/content/components/table/paginated.ts +++ b/apps/docs/content/components/table/paginated.ts @@ -1,211 +1,7 @@ -const data = `export const users = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, - { - key: "5", - name: "Emily Collins", - role: "Marketing Manager", - status: "Active", - }, - { - key: "6", - name: "Brian Kim", - role: "Product Manager", - status: "Active", - }, - { - key: "7", - name: "Laura Thompson", - role: "UX Designer", - status: "Active", - }, - { - key: "8", - name: "Michael Stevens", - role: "Data Analyst", - status: "Paused", - }, - { - key: "9", - name: "Sophia Nguyen", - role: "Quality Assurance", - status: "Active", - }, - { - key: "10", - name: "James Wilson", - role: "Front-end Developer", - status: "Vacation", - }, - { - key: "11", - name: "Ava Johnson", - role: "Back-end Developer", - status: "Active", - }, - { - key: "12", - name: "Isabella Smith", - role: "Graphic Designer", - status: "Active", - }, - { - key: "13", - name: "Oliver Brown", - role: "Content Writer", - status: "Paused", - }, - { - key: "14", - name: "Lucas Jones", - role: "Project Manager", - status: "Active", - }, - { - key: "15", - name: "Grace Davis", - role: "HR Manager", - status: "Active", - }, - { - key: "16", - name: "Elijah Garcia", - role: "Network Administrator", - status: "Active", - }, - { - key: "17", - name: "Emma Martinez", - role: "Accountant", - status: "Vacation", - }, - { - key: "18", - name: "Benjamin Lee", - role: "Operations Manager", - status: "Active", - }, - { - key: "19", - name: "Mia Hernandez", - role: "Sales Manager", - status: "Paused", - }, - { - key: "20", - name: "Daniel Lewis", - role: "DevOps Engineer", - status: "Active", - }, - { - key: "21", - name: "Amelia Clark", - role: "Social Media Specialist", - status: "Active", - }, - { - key: "22", - name: "Jackson Walker", - role: "Customer Support", - status: "Active", - }, - { - key: "23", - name: "Henry Hall", - role: "Security Analyst", - status: "Active", - }, - { - key: "24", - name: "Charlotte Young", - role: "PR Specialist", - status: "Paused", - }, - { - key: "25", - name: "Liam King", - role: "Mobile App Developer", - status: "Active", - }, -];`; - -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, getKeyValue} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - const [page, setPage] = React.useState(1); - const rowsPerPage = 4; - - const pages = Math.ceil(users.length / rowsPerPage); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return users.slice(start, end); - }, [page, users]); - - return ( - - setPage(page)} - /> - - } - classNames={{ - wrapper: "min-h-[222px]", - }} - > - - NAME - ROLE - STATUS - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./paginated.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/table/row-actions.raw.jsx b/apps/docs/content/components/table/row-actions.raw.jsx new file mode 100644 index 000000000..1e6cf2dc5 --- /dev/null +++ b/apps/docs/content/components/table/row-actions.raw.jsx @@ -0,0 +1,88 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Radio, + RadioGroup, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); + + return ( +
    + alert(`Opening item ${key}...`)} + > + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + + Toggle + Replace + +
    + ); +} diff --git a/apps/docs/content/components/table/row-actions.ts b/apps/docs/content/components/table/row-actions.ts index d9d078256..06178c6b7 100644 --- a/apps/docs/content/components/table/row-actions.ts +++ b/apps/docs/content/components/table/row-actions.ts @@ -1,81 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Radio, RadioGroup} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); - - return ( -
    - alert(\`Opening item \${key}...\`)} - > - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - - Toggle - Replace - -
    - ); -}`; +import App from "./row-actions.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/selection-behavior.raw.jsx b/apps/docs/content/components/table/selection-behavior.raw.jsx new file mode 100644 index 000000000..d0fec4a86 --- /dev/null +++ b/apps/docs/content/components/table/selection-behavior.raw.jsx @@ -0,0 +1,87 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Radio, + RadioGroup, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); + + return ( +
    + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + + Toggle + Replace + +
    + ); +} diff --git a/apps/docs/content/components/table/selection-behavior.ts b/apps/docs/content/components/table/selection-behavior.ts index 566480015..b36dec6d8 100644 --- a/apps/docs/content/components/table/selection-behavior.ts +++ b/apps/docs/content/components/table/selection-behavior.ts @@ -1,80 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Radio, RadioGroup} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); - - return ( -
    - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - - Toggle - Replace - -
    - ); -}`; +import App from "./selection-behavior.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/single-selection.raw.jsx b/apps/docs/content/components/table/single-selection.raw.jsx new file mode 100644 index 000000000..35122ba3f --- /dev/null +++ b/apps/docs/content/components/table/single-selection.raw.jsx @@ -0,0 +1,67 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + return ( +
    + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + + {colors.map((color) => ( + + {color} + + ))} + +
    + ); +} diff --git a/apps/docs/content/components/table/single-selection.ts b/apps/docs/content/components/table/single-selection.ts index e187ab933..65d8454ff 100644 --- a/apps/docs/content/components/table/single-selection.ts +++ b/apps/docs/content/components/table/single-selection.ts @@ -1,66 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react"; - -const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); - - return ( -
    - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - - {colors.map((color) => ( - - {color} - - ))} - -
    - ); -}`; +import App from "./single-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/sorting.raw.jsx b/apps/docs/content/components/table/sorting.raw.jsx new file mode 100644 index 000000000..ddc13bfbb --- /dev/null +++ b/apps/docs/content/components/table/sorting.raw.jsx @@ -0,0 +1,82 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Spinner, +} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + const [isLoading, setIsLoading] = React.useState(true); + + let list = useAsyncList({ + async load({signal}) { + let res = await fetch("https://swapi.py4e.com/api/people/?search", { + signal, + }); + let json = await res.json(); + + setIsLoading(false); + + return { + items: json.results, + }; + }, + async sort({items, sortDescriptor}) { + return { + items: items.sort((a, b) => { + let first = a[sortDescriptor.column]; + let second = b[sortDescriptor.column]; + let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1; + + if (sortDescriptor.direction === "descending") { + cmp *= -1; + } + + return cmp; + }), + }; + }, + }); + + return ( + + + + Name + + + Height + + + Mass + + + Birth year + + + } + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/sorting.ts b/apps/docs/content/components/table/sorting.ts index be3f41afb..231fa295c 100644 --- a/apps/docs/content/components/table/sorting.ts +++ b/apps/docs/content/components/table/sorting.ts @@ -1,75 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Spinner} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - const [isLoading, setIsLoading] = React.useState(true); - - let list = useAsyncList({ - async load({signal}) { - let res = await fetch('https://swapi.py4e.com/api/people/?search', { - signal, - }); - let json = await res.json(); - setIsLoading(false); - - return { - items: json.results, - }; - }, - async sort({items, sortDescriptor}) { - return { - items: items.sort((a, b) => { - let first = a[sortDescriptor.column]; - let second = b[sortDescriptor.column]; - let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1; - - if (sortDescriptor.direction === "descending") { - cmp *= -1; - } - - return cmp; - }), - }; - }, - }); - - return ( - - - - Name - - - Height - - - Mass - - - Birth year - - - } - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./sorting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/striped.raw.jsx b/apps/docs/content/components/table/striped.raw.jsx new file mode 100644 index 000000000..a032ad7f6 --- /dev/null +++ b/apps/docs/content/components/table/striped.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + ); +} diff --git a/apps/docs/content/components/table/striped.ts b/apps/docs/content/components/table/striped.ts index 2d9f32ff5..efcbdde82 100644 --- a/apps/docs/content/components/table/striped.ts +++ b/apps/docs/content/components/table/striped.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - ); -}`; +import App from "./striped.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/usage.raw.jsx b/apps/docs/content/components/table/usage.raw.jsx new file mode 100644 index 000000000..b6a8bf0c5 --- /dev/null +++ b/apps/docs/content/components/table/usage.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + ); +} diff --git a/apps/docs/content/components/table/usage.ts b/apps/docs/content/components/table/usage.ts index b6e06ec81..1118304c3 100644 --- a/apps/docs/content/components/table/usage.ts +++ b/apps/docs/content/components/table/usage.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/use-case.raw.jsx b/apps/docs/content/components/table/use-case.raw.jsx new file mode 100644 index 000000000..b1bbeaf73 --- /dev/null +++ b/apps/docs/content/components/table/use-case.raw.jsx @@ -0,0 +1,640 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, +} from "@nextui-org/react"; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "Active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => { + return ( + + ); +}; + +const statusColorMap = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + const [page, setPage] = React.useState(1); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const pages = Math.ceil(filteredItems.length / rowsPerPage); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a, b) => { + const first = a[sortDescriptor.column]; + const second = b[sortDescriptor.column]; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user, columnKey) => { + const cellValue = user[columnKey]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
    +

    {cellValue}

    +

    {user.team}

    +
    + ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
    + + + + + + View + Edit + Delete + + +
    + ); + default: + return cellValue; + } + }, []); + + const onNextPage = React.useCallback(() => { + if (page < pages) { + setPage(page + 1); + } + }, [page, pages]); + + const onPreviousPage = React.useCallback(() => { + if (page > 1) { + setPage(page - 1); + } + }, [page]); + + const onRowsPerPageChange = React.useCallback((e) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const onClear = React.useCallback(() => { + setFilterValue(""); + setPage(1); + }, []); + + const topContent = React.useMemo(() => { + return ( +
    +
    + } + value={filterValue} + onClear={() => onClear()} + onValueChange={onSearchChange} + /> +
    + + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
    +
    +
    + Total {users.length} users + +
    +
    + ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onRowsPerPageChange, + users.length, + onSearchChange, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
    + + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${filteredItems.length} selected`} + + +
    + + +
    +
    + ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/use-case.raw.tsx b/apps/docs/content/components/table/use-case.raw.tsx new file mode 100644 index 000000000..e5c0113e3 --- /dev/null +++ b/apps/docs/content/components/table/use-case.raw.tsx @@ -0,0 +1,653 @@ +import React, {SVGProps} from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, + Selection, + ChipProps, + SortDescriptor, +} from "@nextui-org/react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export function capitalize(s: string) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const SearchIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => { + return ( + + ); +}; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "Active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +const statusColorMap: Record = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +type User = (typeof users)[0]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState( + new Set(INITIAL_VISIBLE_COLUMNS), + ); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + + const [page, setPage] = React.useState(1); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const pages = Math.ceil(filteredItems.length / rowsPerPage); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a: User, b: User) => { + const first = a[sortDescriptor.column as keyof User] as number; + const second = b[sortDescriptor.column as keyof User] as number; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user: User, columnKey: React.Key) => { + const cellValue = user[columnKey as keyof User]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
    +

    {cellValue}

    +

    {user.team}

    +
    + ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
    + + + + + + View + Edit + Delete + + +
    + ); + default: + return cellValue; + } + }, []); + + const onNextPage = React.useCallback(() => { + if (page < pages) { + setPage(page + 1); + } + }, [page, pages]); + + const onPreviousPage = React.useCallback(() => { + if (page > 1) { + setPage(page - 1); + } + }, [page]); + + const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value?: string) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const onClear = React.useCallback(() => { + setFilterValue(""); + setPage(1); + }, []); + + const topContent = React.useMemo(() => { + return ( +
    +
    + } + value={filterValue} + onClear={() => onClear()} + onValueChange={onSearchChange} + /> +
    + + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
    +
    +
    + Total {users.length} users + +
    +
    + ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onSearchChange, + onRowsPerPageChange, + users.length, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
    + + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${filteredItems.length} selected`} + + +
    + + +
    +
    + ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
    + ); +} diff --git a/apps/docs/content/components/table/use-case.ts b/apps/docs/content/components/table/use-case.ts index b46e960e7..a03774d7c 100644 --- a/apps/docs/content/components/table/use-case.ts +++ b/apps/docs/content/components/table/use-case.ts @@ -1,1324 +1,12 @@ -const data = `const columns = [ - {name: "ID", uid: "id", sortable: true}, - {name: "NAME", uid: "name", sortable: true}, - {name: "AGE", uid: "age", sortable: true}, - {name: "ROLE", uid: "role", sortable: true}, - {name: "TEAM", uid: "team"}, - {name: "EMAIL", uid: "email"}, - {name: "STATUS", uid: "status", sortable: true}, - {name: "ACTIONS", uid: "actions"}, -]; - -const statusOptions = [ - {name: "Active", uid: "active"}, - {name: "Paused", uid: "paused"}, - {name: "Vacation", uid: "vacation"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://i.pravatar.cc/150?img=4", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://i.pravatar.cc/150?img=5", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?img=8", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://i.pravatar.cc/150?img=10", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://i.pravatar.cc/150?img=12", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://i.pravatar.cc/150?img=16", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://i.pravatar.cc/150?img=15", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?img=20", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://i.pravatar.cc/150?img=33", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://i.pravatar.cc/150?img=29", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://i.pravatar.cc/150?img=50", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://i.pravatar.cc/150?img=45", - email: "mia.robinson@example.com", - }, -]; - -export {columns, users, statusOptions};`; - -const dataTs = `const columns = [ - {name: "ID", uid: "id", sortable: true}, - {name: "NAME", uid: "name", sortable: true}, - {name: "AGE", uid: "age", sortable: true}, - {name: "ROLE", uid: "role", sortable: true}, - {name: "TEAM", uid: "team"}, - {name: "EMAIL", uid: "email"}, - {name: "STATUS", uid: "status", sortable: true}, - {name: "ACTIONS", uid: "actions"}, -]; - -const statusOptions = [ - {name: "Active", uid: "active"}, - {name: "Paused", uid: "paused"}, - {name: "Vacation", uid: "vacation"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "brian.kim@example.com", - status: "Active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://i.pravatar.cc/150?img=4", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://i.pravatar.cc/150?img=5", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?img=8", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://i.pravatar.cc/150?img=10", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://i.pravatar.cc/150?img=12", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://i.pravatar.cc/150?img=16", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://i.pravatar.cc/150?img=15", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?img=20", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://i.pravatar.cc/150?img=33", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://i.pravatar.cc/150?img=29", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://i.pravatar.cc/150?img=50", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://i.pravatar.cc/150?img=45", - email: "mia.robinson@example.com", - }, -]; - -export {columns, users, statusOptions};`; - -const types = `import {SVGProps} from "react"; - -export type IconSvgProps = SVGProps & { - size?: number; -};`; - -const utils = `export function capitalize(s) { - return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; -}`; - -const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const VerticalDotsIcon = `export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => ( - -);`; - -const utilsTs = `export function capitalize(s: string) { - return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; -}`; - -const PlusIconTs = `import {IconSvgProps} from "./types"; - -export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => ( - -);`; - -const VerticalDotsIconTs = `import {IconSvgProps} from "./types"; - -export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => ( - -);`; - -const SearchIconTs = `import {IconSvgProps} from "./types"; - -export const SearchIcon = (props: IconSvgProps) => ( - -);`; - -const ChevronDownIconTs = `import {IconSvgProps} from "./types"; - -export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => ( - -);`; - -const App = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {SearchIcon} from "./SearchIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - const [page, setPage] = React.useState(1); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const pages = Math.ceil(filteredItems.length / rowsPerPage); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a, b) => { - const first = a[sortDescriptor.column]; - const second = b[sortDescriptor.column]; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user, columnKey) => { - const cellValue = user[columnKey]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
    -

    {cellValue}

    -

    {user.team}

    -
    - ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
    - - - - - - View - Edit - Delete - - -
    - ); - default: - return cellValue; - } - }, []); - - const onNextPage = React.useCallback(() => { - if (page < pages) { - setPage(page + 1); - } - }, [page, pages]); - - const onPreviousPage = React.useCallback(() => { - if (page > 1) { - setPage(page - 1); - } - }, [page]); - - const onRowsPerPageChange = React.useCallback((e) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - const onSearchChange = React.useCallback((value) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const onClear = React.useCallback(()=>{ - setFilterValue("") - setPage(1) - },[]) - - const topContent = React.useMemo(() => { - return ( -
    -
    - } - value={filterValue} - onClear={() => onClear()} - onValueChange={onSearchChange} - /> -
    - - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
    -
    -
    - Total {users.length} users - -
    -
    - ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onRowsPerPageChange, - users.length, - onSearchChange, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
    - - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${filteredItems.length} selected\`} - - -
    - - -
    -
    - ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
    - ); -}`; - -const AppTs = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, - Selection, - ChipProps, - SortDescriptor -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {SearchIcon} from "./SearchIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap: Record = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -type User = typeof users[0]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - - const [page, setPage] = React.useState(1); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const pages = Math.ceil(filteredItems.length / rowsPerPage); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a: User, b: User) => { - const first = a[sortDescriptor.column as keyof User] as number; - const second = b[sortDescriptor.column as keyof User] as number; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user: User, columnKey: React.Key) => { - const cellValue = user[columnKey as keyof User]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
    -

    {cellValue}

    -

    {user.team}

    -
    - ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
    - - - - - - View - Edit - Delete - - -
    - ); - default: - return cellValue; - } - }, []); - - const onNextPage = React.useCallback(() => { - if (page < pages) { - setPage(page + 1); - } - }, [page, pages]); - - const onPreviousPage = React.useCallback(() => { - if (page > 1) { - setPage(page - 1); - } - }, [page]); - - const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - const onSearchChange = React.useCallback((value?: string) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const onClear = React.useCallback(()=>{ - setFilterValue("") - setPage(1) - },[]) - - const topContent = React.useMemo(() => { - return ( -
    -
    - } - value={filterValue} - onClear={() => onClear()} - onValueChange={onSearchChange} - /> -
    - - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
    -
    -
    - Total {users.length} users - -
    -
    - ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onSearchChange, - onRowsPerPageChange, - users.length, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
    - - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${filteredItems.length} selected\`} - - -
    - - -
    -
    - ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
    - ); -}`; +import App from "./use-case.raw.jsx?raw"; +import AppTs from "./use-case.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/utils.js": utils, - "/PlusIcon.jsx": PlusIcon, - "/SearchIcon.jsx": SearchIcon, - "/ChevronDownIcon.jsx": ChevronDownIcon, - "/VerticalDotsIcon.jsx": VerticalDotsIcon, }; const reactTs = { "/App.tsx": AppTs, - "/types.ts": types, - "/data.ts": dataTs, - "/utils.ts": utilsTs, - "/PlusIcon.tsx": PlusIconTs, - "/VerticalDotsIcon.tsx": VerticalDotsIconTs, - "/SearchIcon.tsx": SearchIconTs, - "/ChevronDownIcon.tsx": ChevronDownIconTs, }; export default { diff --git a/apps/docs/content/components/table/without-header.raw.jsx b/apps/docs/content/components/table/without-header.raw.jsx new file mode 100644 index 000000000..e5506cc19 --- /dev/null +++ b/apps/docs/content/components/table/without-header.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + ); +} diff --git a/apps/docs/content/components/table/without-header.ts b/apps/docs/content/components/table/without-header.ts index 18c4b55d9..90f0321bc 100644 --- a/apps/docs/content/components/table/without-header.ts +++ b/apps/docs/content/components/table/without-header.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - ); -}`; +import App from "./without-header.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/without-wrapper.raw.jsx b/apps/docs/content/components/table/without-wrapper.raw.jsx new file mode 100644 index 000000000..26d6e3871 --- /dev/null +++ b/apps/docs/content/components/table/without-wrapper.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
    + ); +} diff --git a/apps/docs/content/components/table/without-wrapper.ts b/apps/docs/content/components/table/without-wrapper.ts index 74e22f5a2..326e58070 100644 --- a/apps/docs/content/components/table/without-wrapper.ts +++ b/apps/docs/content/components/table/without-wrapper.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
    - ); -}`; +import App from "./without-wrapper.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/colors.raw.jsx b/apps/docs/content/components/tabs/colors.raw.jsx new file mode 100644 index 000000000..38163ff07 --- /dev/null +++ b/apps/docs/content/components/tabs/colors.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
    + {colors.map((color) => ( + + + + + + ))} +
    + ); +} diff --git a/apps/docs/content/components/tabs/colors.ts b/apps/docs/content/components/tabs/colors.ts index ff9140ba8..d5bef810a 100644 --- a/apps/docs/content/components/tabs/colors.ts +++ b/apps/docs/content/components/tabs/colors.ts @@ -1,27 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger" - ]; - - return ( -
    - {colors.map((color) => ( - - - - - - ))} -
    - ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/controlled.raw.jsx b/apps/docs/content/components/tabs/controlled.raw.jsx new file mode 100644 index 000000000..9038268ef --- /dev/null +++ b/apps/docs/content/components/tabs/controlled.raw.jsx @@ -0,0 +1,38 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("photos"); + + return ( +
    + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
    + ); +} diff --git a/apps/docs/content/components/tabs/controlled.ts b/apps/docs/content/components/tabs/controlled.ts index 54ae1ee40..2c3f0cacb 100644 --- a/apps/docs/content/components/tabs/controlled.ts +++ b/apps/docs/content/components/tabs/controlled.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("photos"); - - return ( -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
    - ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/custom-styles.raw.jsx b/apps/docs/content/components/tabs/custom-styles.raw.jsx new file mode 100644 index 000000000..d245ce75d --- /dev/null +++ b/apps/docs/content/components/tabs/custom-styles.raw.jsx @@ -0,0 +1,131 @@ +import {Tabs, Tab, Chip} from "@nextui-org/react"; + +export const GalleryIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const VideoIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
    + + + + Photos + + 9 + +
    + } + /> + + + Music + + 3 + +
    + } + /> + + + Videos + + 1 + +
    + } + /> + +
    + ); +} diff --git a/apps/docs/content/components/tabs/custom-styles.ts b/apps/docs/content/components/tabs/custom-styles.ts index ff197991d..da3ea9093 100644 --- a/apps/docs/content/components/tabs/custom-styles.ts +++ b/apps/docs/content/components/tabs/custom-styles.ts @@ -1,113 +1,7 @@ -const GalleryIcon = `export const GalleryIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const VideoIcon = `export const VideoIcon = (props) => ( - -);`; - -const App = `import {Tabs, Tab, Chip} from "@nextui-org/react"; -import {GalleryIcon} from "./GalleryIcon"; -import {MusicIcon} from "./MusicIcon"; -import {VideoIcon} from "./VideoIcon"; - -export default function App() { - return ( -
    - - - - Photos - 9 -
    - } - /> - - - Music - 3 -
    - } - /> - - - Videos - 1 -
    - } - /> - -
    - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/GalleryIcon.jsx": GalleryIcon, - "/MusicIcon.jsx": MusicIcon, - "/VideoIcon.jsx": VideoIcon, }; export default { diff --git a/apps/docs/content/components/tabs/disabled-item.raw.jsx b/apps/docs/content/components/tabs/disabled-item.raw.jsx new file mode 100644 index 000000000..36b3b2058 --- /dev/null +++ b/apps/docs/content/components/tabs/disabled-item.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
    + ); +} diff --git a/apps/docs/content/components/tabs/disabled-item.ts b/apps/docs/content/components/tabs/disabled-item.ts index 9106c6754..90d0beb6b 100644 --- a/apps/docs/content/components/tabs/disabled-item.ts +++ b/apps/docs/content/components/tabs/disabled-item.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
    - ); -}`; +import App from "./disabled-item.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/disabled.raw.jsx b/apps/docs/content/components/tabs/disabled.raw.jsx new file mode 100644 index 000000000..d37812b16 --- /dev/null +++ b/apps/docs/content/components/tabs/disabled.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
    + ); +} diff --git a/apps/docs/content/components/tabs/disabled.ts b/apps/docs/content/components/tabs/disabled.ts index 4e5449d76..1a215cc91 100644 --- a/apps/docs/content/components/tabs/disabled.ts +++ b/apps/docs/content/components/tabs/disabled.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
    - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/dynamic.raw.jsx b/apps/docs/content/components/tabs/dynamic.raw.jsx new file mode 100644 index 000000000..53570bebf --- /dev/null +++ b/apps/docs/content/components/tabs/dynamic.raw.jsx @@ -0,0 +1,38 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + let tabs = [ + { + id: "photos", + label: "Photos", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + }, + { + id: "music", + label: "Music", + content: + "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + }, + { + id: "videos", + label: "Videos", + content: + "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + }, + ]; + + return ( +
    + + {(item) => ( + + + {item.content} + + + )} + +
    + ); +} diff --git a/apps/docs/content/components/tabs/dynamic.ts b/apps/docs/content/components/tabs/dynamic.ts index 3e13d8eab..5d3c97bb9 100644 --- a/apps/docs/content/components/tabs/dynamic.ts +++ b/apps/docs/content/components/tabs/dynamic.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - let tabs = [ - { - id: "photos", - label: "Photos", - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." - }, - { - id: "music", - label: "Music", - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." - }, - { - id: "videos", - label: "Videos", - content: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." - } - ]; - - return ( -
    - - {(item) => ( - - - - {item.content} - - - - )} - -
    - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/form.raw.jsx b/apps/docs/content/components/tabs/form.raw.jsx new file mode 100644 index 000000000..61422dd9f --- /dev/null +++ b/apps/docs/content/components/tabs/form.raw.jsx @@ -0,0 +1,67 @@ +import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("login"); + + return ( +
    + + + + +
    + + +

    + Need to create an account?{" "} + setSelected("sign-up")}> + Sign up + +

    +
    + +
    +
    +     + +
    + + + +

    + Already have an account?{" "} + setSelected("login")}> + Login + +

    +
    + +
    +
    +     +     +     +     +
    + ); +} diff --git a/apps/docs/content/components/tabs/form.raw.tsx b/apps/docs/content/components/tabs/form.raw.tsx new file mode 100644 index 000000000..1e3e7f4c7 --- /dev/null +++ b/apps/docs/content/components/tabs/form.raw.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("login"); + + return ( +
    + + + + +
    + + +

    + Need to create an account?{" "} + setSelected("sign-up")}> + Sign up + +

    +
    + +
    +
    +     + +
    + + + +

    + Already have an account?{" "} + setSelected("login")}> + Login + +

    +
    + +
    +
    +     +     +     +     +
    + ); +} diff --git a/apps/docs/content/components/tabs/form.ts b/apps/docs/content/components/tabs/form.ts index 679964350..2f8c0d849 100644 --- a/apps/docs/content/components/tabs/form.ts +++ b/apps/docs/content/components/tabs/form.ts @@ -1,138 +1,5 @@ -const App = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("login"); - - return ( -
    - - - - -
    - - -

    - Need to create an account?{" "} - setSelected("sign-up")}> - Sign up - -

    -
    - -
    -
    -     - -
    - - - -

    - Already have an account?{" "} - setSelected("login")}> - Login - -

    -
    - -
    -
    -     -     -     -     -
    - ); -}`; - -const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("login"); - - return ( -
    - - - - -
    - - -

    - Need to create an account?{" "} - setSelected("sign-up")}> - Sign up - -

    -
    - -
    -
    -     - -
    - - - -

    - Already have an account?{" "} - setSelected("login")}> - Login - -

    -
    - -
    -
    -     -     -     -     -
    - ); -}`; +import App from "./form.raw.jsx?raw"; +import AppTs from "./form.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/icons.raw.jsx b/apps/docs/content/components/tabs/icons.raw.jsx new file mode 100644 index 000000000..17bca089e --- /dev/null +++ b/apps/docs/content/components/tabs/icons.raw.jsx @@ -0,0 +1,112 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export const GalleryIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const VideoIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
    + + + + Photos +
    + } + /> + + + Music +
    + } + /> + + + Videos +
    + } + /> + +
    + ); +} diff --git a/apps/docs/content/components/tabs/icons.ts b/apps/docs/content/components/tabs/icons.ts index b272ee425..22a410c88 100644 --- a/apps/docs/content/components/tabs/icons.ts +++ b/apps/docs/content/components/tabs/icons.ts @@ -1,100 +1,7 @@ -const GalleryIcon = `export const GalleryIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const VideoIcon = `export const VideoIcon = (props) => ( - -);`; - -const App = `import {Tabs, Tab} from "@nextui-org/react"; -import {GalleryIcon} from "./GalleryIcon"; -import {MusicIcon} from "./MusicIcon"; -import {VideoIcon} from "./VideoIcon"; - -export default function App() { - return ( -
    - - - - Photos -
    - } - /> - - - Music -
    - } - /> - - - Videos -
    - } - /> - -
    - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/GalleryIcon.jsx": GalleryIcon, - "/MusicIcon.jsx": MusicIcon, - "/VideoIcon.jsx": VideoIcon, }; export default { diff --git a/apps/docs/content/components/tabs/placement.raw.jsx b/apps/docs/content/components/tabs/placement.raw.jsx new file mode 100644 index 000000000..2fdc1e757 --- /dev/null +++ b/apps/docs/content/components/tabs/placement.raw.jsx @@ -0,0 +1,51 @@ +import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [placement, setPlacement] = React.useState("top"); + + return ( +
    + setPlacement(value)} + > + top + bottom + start + end + +
    + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
    +
    + ); +} diff --git a/apps/docs/content/components/tabs/placement.ts b/apps/docs/content/components/tabs/placement.ts index 558a4bbdb..eee224436 100644 --- a/apps/docs/content/components/tabs/placement.ts +++ b/apps/docs/content/components/tabs/placement.ts @@ -1,48 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [placement, setPlacement] = React.useState("top"); - return ( -
    - setPlacement(value)} - > - top - bottom - start - end - -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
    -
    - ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/radius.raw.jsx b/apps/docs/content/components/tabs/radius.raw.jsx new file mode 100644 index 000000000..0959a3108 --- /dev/null +++ b/apps/docs/content/components/tabs/radius.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const radiusList = ["full", "lg", "md", "sm", "none"]; + + return ( +
    + {radiusList.map((radius) => ( + + + + + + ))} +
    + ); +} diff --git a/apps/docs/content/components/tabs/radius.ts b/apps/docs/content/components/tabs/radius.ts index 75c39db1d..7b78db1ce 100644 --- a/apps/docs/content/components/tabs/radius.ts +++ b/apps/docs/content/components/tabs/radius.ts @@ -1,26 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const radiusList = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
    - {radiusList.map((radius) => ( - - - - - - ))} -
    - ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/sizes.raw.jsx b/apps/docs/content/components/tabs/sizes.raw.jsx new file mode 100644 index 000000000..589d1a18a --- /dev/null +++ b/apps/docs/content/components/tabs/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
    + {sizes.map((size) => ( + + + + + + ))} +
    + ); +} diff --git a/apps/docs/content/components/tabs/sizes.ts b/apps/docs/content/components/tabs/sizes.ts index 9e2015865..85a2f5b30 100644 --- a/apps/docs/content/components/tabs/sizes.ts +++ b/apps/docs/content/components/tabs/sizes.ts @@ -1,24 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const sizes = [ - "sm", - "md", - "lg", - ]; - - return ( -
    - {sizes.map((size) => ( - - - - - - ))} -
    - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/usage.raw.jsx b/apps/docs/content/components/tabs/usage.raw.jsx new file mode 100644 index 000000000..54c7a54cc --- /dev/null +++ b/apps/docs/content/components/tabs/usage.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
    + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
    + ); +} diff --git a/apps/docs/content/components/tabs/usage.ts b/apps/docs/content/components/tabs/usage.ts index 552e09828..1118304c3 100644 --- a/apps/docs/content/components/tabs/usage.ts +++ b/apps/docs/content/components/tabs/usage.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; - -export default function App() { - return ( -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
    - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/variants.raw.jsx b/apps/docs/content/components/tabs/variants.raw.jsx new file mode 100644 index 000000000..d63d01a38 --- /dev/null +++ b/apps/docs/content/components/tabs/variants.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const variants = ["solid", "underlined", "bordered", "light"]; + + return ( +
    + {variants.map((variant) => ( + + + + + + ))} +
    + ); +} diff --git a/apps/docs/content/components/tabs/variants.ts b/apps/docs/content/components/tabs/variants.ts index 53c80deb2..ddea95fb2 100644 --- a/apps/docs/content/components/tabs/variants.ts +++ b/apps/docs/content/components/tabs/variants.ts @@ -1,25 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const variants = [ - "solid", - "underlined", - "bordered", - "light", - ]; - - return ( -
    - {variants.map((variant) => ( - - - - - - ))} -
    - ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/vertical.raw.jsx b/apps/docs/content/components/tabs/vertical.raw.jsx new file mode 100644 index 000000000..b1229a896 --- /dev/null +++ b/apps/docs/content/components/tabs/vertical.raw.jsx @@ -0,0 +1,43 @@ +import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react"; + +export default function App() { + const [isVertical, setIsVertical] = React.useState(true); + + return ( +
    + + Vertical + +
    + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
    +
    + ); +} diff --git a/apps/docs/content/components/tabs/vertical.ts b/apps/docs/content/components/tabs/vertical.ts index 7487c22bb..697ac1034 100644 --- a/apps/docs/content/components/tabs/vertical.ts +++ b/apps/docs/content/components/tabs/vertical.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react"; - -export default function App() { - const [isVertical, setIsVertical] = React.useState(true); - return ( -
    - - Vertical - -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
    -
    - ); -}`; +import App from "./vertical.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/textarea/autosize.raw.jsx b/apps/docs/content/components/textarea/autosize.raw.jsx new file mode 100644 index 000000000..0addb39d7 --- /dev/null +++ b/apps/docs/content/components/textarea/autosize.raw.jsx @@ -0,0 +1,11 @@ +import {Textarea} from "@nextui-org/react"; + +export default function App() { + return ( +
    +