diff --git a/.changeset/tall-oranges-explode.md b/.changeset/tall-oranges-explode.md new file mode 100644 index 000000000..a264b4a1b --- /dev/null +++ b/.changeset/tall-oranges-explode.md @@ -0,0 +1,5 @@ +--- +"@heroui/system": patch +--- + +Update spinner variants diff --git a/apps/docs/components/scripts/script-providers.tsx b/apps/docs/components/scripts/script-providers.tsx index c01650763..9f2993a22 100644 --- a/apps/docs/components/scripts/script-providers.tsx +++ b/apps/docs/components/scripts/script-providers.tsx @@ -15,7 +15,7 @@ export function ScriptProviders({ isKapaEnabled = true }: { isKapaEnabled?: bool React.useEffect(() => { function hideKapa() { const kapaElements = document.querySelectorAll('[id^="kapa-"]'); - const display = pathname === "/docs/components/toast" ? "none" : "block"; + const display = pathname === "/docs/components/toast" || pathname === "/blog/v2.7.0" ? "none" : "block"; kapaElements.forEach((element) => (element as HTMLElement).style.display = display); diff --git a/apps/docs/content/blog/v2.7.0.mdx b/apps/docs/content/blog/v2.7.0.mdx new file mode 100644 index 000000000..e61f0a744 --- /dev/null +++ b/apps/docs/content/blog/v2.7.0.mdx @@ -0,0 +1,340 @@ +--- +title: "HeroUI v2.7.0" +description: "New Toast component, NumberInput, Theme Generator, and lots of bug fixes and improvements." +date: "2025-02-19" +image: "/blog/v2.7.0.jpg" +tags: ["heroui", "v2.7.0", "release", "toast", "improvements", "theme"] +author: + name: "Junior Garcia" + username: "@jrgarciadev" + link: "https://x.com/jrgarciadev" + avatar: "/avatars/junior-garcia.jpeg" +--- + +import spinnerVariantsContent from "@/content/components/spinner/variants.ts"; +import toastUsage from "@/content/components/toast/usage.ts"; +import simpleToast from "@/content/components/toast/simple.ts"; +import numberInputContent from "@/content/components/number-input/description.ts"; +import tableVirtualizationContent from "@/content/components/table/virtualization.ts"; + + +HeroUI v2.7.0 + +HeroUI version **v2.7.0** introduces the highly anticipated Toast component, along with exciting new features including NumberInput component, Theme Generator, new Spinner variants, Table virtualization support, and numerous improvements and bug fixes. + +## What's New in v2.7.0? + +- [Toast Component](#toast-component) - A new toast notification system with rich features +- [NumberInput Component](#numberinput-component) - A new input component specifically designed for numerical values +- [New Spinner Variants](#new-spinner-variants) - Enhanced spinner component with new design variants +- [Theme Generator](#theme-generator) - A powerful web-based tool for creating and customizing your themes +- [Table Virtualization](#table-virtualization) - Performance improvements for large datasets in Table component +- [New Global Props](#new-global-props) - New global configuration options for label placement and spinner variant +- [Keyboard Support](#keyboard-support) - Enhanced keyboard support with fn, win, and alt keys +- [Type Improvements](#type-improvements) - Better TypeScript support and exported types +- [What's Next?](#whats-next) - Upcoming features and improvements +- [Breaking Changes](#breaking-changes) - Important changes that may affect existing implementations +- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements + + + +**Upgrade today by using one of the following methods**: + +1. Upgrading HeroUI using the `cli` + + + +2. Upgrading HeroUI using package managers + + + + + +## Toast Component + +The new Toast component provides a flexible and accessible way to show temporary notifications in your application. It comes with built-in support for different placements, variants, and animations. Inspired by [Sonner](https://sonner.emilkowal.ski/), our Toast component brings a beautiful, minimal, and customizable notification system to HeroUI. + +### Setup + +First, add the `ToastProvider` to your application: + +```tsx +// app/providers.tsx +import {HeroUIProvider, ToastProvider} from '@heroui/react' +// for individual components use the following import +// import {ToastProvider} from '@heroui/toast' + + +export default function Providers({children}) { + return ( + + + {children} + + ) +} +``` + +### Basic Usage + +```tsx +import {Button, addToast} from "@heroui/react"; + +function Example() { + return ( + + ); +} +``` + + + + +### Features + +- Multiple placement options (top, bottom, left, right, center) +- Different variants (solid, bordered, flat) +- Custom timeout duration +- Progress indicator +- Promise support for loading states +- Customizable icons and styling +- Accessibility built-in + + + +For more examples and detailed documentation about the Toast component, visit our [Toast documentation](/docs/components/toast). + +## NumberInput Component + +A new specialized input component for numerical values with built-in validation, formatting, and keyboard controls. + + + +For more examples and detailed documentation about the NumberInput component, visit our [NumberInput documentation](/docs/components/number-input). + +## New Spinner Variants + +The Spinner component now includes new design variants, offering more options for loading states in your applications. + + + +For more examples and detailed documentation about the Spinner component, visit our [Spinner documentation](/docs/components/spinner). + +## Theme Generator + +The new Theme Generator is a powerful web-based tool that allows you to create and customize your themes visually. Simply visit our [Theme Generator](/themes) to: + +- Create custom color schemes +- Preview components with your theme in real-time +- Generate the theme code automatically +- Export your theme configuration +- Test different color combinations +- Ensure proper contrast and accessibility + +This tool makes it easier than ever to maintain consistent design across your application without having to write theme configuration manually. + +For more information about theming and customization, visit our [Theme documentation](/docs/customization/customize-theme). + +## Table Virtualization + +The Table component now supports virtualization, significantly improving performance when working with large datasets. + +```tsx +import {Table} from "@heroui/react"; + +function Example() { + return ( + + {/* Table content */} +
+ ); +} +``` + + + +For more examples and detailed documentation about the Table component, visit our [Table documentation](/docs/components/table). + +## New Global Props + +We've added new global configuration options to the `HeroUIProvider` that allow you to set default behaviors across your application: + +#### Label Placement + +You can now set a global default for label placement across all form-based components. This affects components that have the `labelPlacement` property, including: + +- Input +- Select +- Autocomplete +- DatePicker +- DateRangePicker +- TimeInput +- NumberInput +- And more... + +```tsx +import {HeroUIProvider} from "@heroui/react"; + +function App() { + return ( + + {/* All form components will have outside labels by default */} + + ); +} +``` + +#### Spinner Variant + +You can set a global default spinner variant that will be used by all components that show loading states, including: + +- Select +- Autocomplete +- Button +- And other components that use loading indicators + +```tsx +import {HeroUIProvider} from "@heroui/react"; + +function App() { + return ( + + {/* All components will use the dots spinner variant by default */} + + ); +} +``` + +You can combine multiple global props to maintain consistent behavior throughout your application: + +```tsx +import {HeroUIProvider} from "@heroui/react"; + +function App() { + return ( + + {/* Your app content */} + + ); +} +``` + +For more information about global configuration options, visit our [Provider documentation](/docs/api-references/heroui-provider). + +## Keyboard Support + +Enhanced keyboard support with the addition of `fn`, `win`, and `alt` keys for better accessibility and user interaction. + +## Type Improvements + +Better TypeScript support with exported `PressEvent` type for `onPress` event handling: + +```tsx +import type {PressEvent} from "@heroui/react"; + +function handlePress(e: PressEvent) { + // Your press event handler +} +``` + +## What's Next? + +We're continuously working on improving HeroUI. Stay tuned for more exciting features and enhancements in upcoming releases. + +## Breaking Changes + +- Renamed `wrapper` slot to `tabWrapper` in Tabs component +- Deprecated `dateInputClassNames` in favor of new styling approach +- Replaced directional terms `left` & `right` with `start` & `end` for better RTL support + +## Release Changes + +### Features 🚀 + +- Added Toast component with rich features and customization options +- Added NumberInput component +- Added `fn`, `win`, and `alt` keys +- Added global `labelPlacement` prop +- Added new Spinner variants +- Added Virtualization to Table +- Added Theme Generator +- Exported PressEvent for onPress event typing + +### Documentation 📘 + +- Fixed custom implementation preview for checkbox & checkbox-group +- Fixed small typos and added clarifying language in Modal +- Fixed Tab usage example +- Fixed horizontal scrolling example in scroll-shadow +- Added note about itemHeight for virtualization +- Removed dropdown menu width +- Added TypeScript examples to show Selection type usage + +### Bug Fixes 🐛 + +- Fixed missing shadow none +- Fixed function components cannot be given refs +- Fixed image loading after props change +- Fixed unexpected scrollShadow on virtualized listbox +- Fixed missing clear button with file input type +- Fixed labelPlacement in Select +- Fixed deprecation warning triggered by internal onClick +- Fixed controlled page after delay in Pagination +- Fixed accessing element.ref was removed in React 19 issue +- Fixed missing press events to usePress +- Fixed stroke in CheckboxIcon +- Fixed portalContainer error on NavbarMenu +- Fixed default validation behaviour in Form +- Fixed RTL navigation in Calendar +- Fixed inert value in next15 +- Fixed dismissable default value +- Fixed input height in innerWrapper in Select +- Fixed SelectItem, ListboxItem, and AutocompleteItem not to accept value props +- Fixed border radius in Table when isMultiSelectable + +### Enhancements ✨ + +- Upgraded Tailwind Variants +- Renamed `wrapper` slot to `tabWrapper` +- Removed unnecessary className passing to tv and made naming consistent +- Removed cursor-hit in hiddenInputClasses +- Removed unnecessary `shouldBlockScroll` prop in Tooltip +- Replaced left & right by start & end to support RTL + +For more details about this release, check out our [GitHub release page](https://github.com/heroui-inc/heroui/releases/tag/v2.7.0). \ No newline at end of file diff --git a/apps/docs/content/components/toast/simple.raw.jsx b/apps/docs/content/components/toast/simple.raw.jsx new file mode 100644 index 000000000..36297faae --- /dev/null +++ b/apps/docs/content/components/toast/simple.raw.jsx @@ -0,0 +1,18 @@ +import {addToast, Button} from "@heroui/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/toast/simple.ts b/apps/docs/content/components/toast/simple.ts new file mode 100644 index 000000000..78e2650ea --- /dev/null +++ b/apps/docs/content/components/toast/simple.ts @@ -0,0 +1,9 @@ +import App from "./simple.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/docs/api-references/heroui-provider.mdx b/apps/docs/content/docs/api-references/heroui-provider.mdx index 52f156661..7e035f816 100644 --- a/apps/docs/content/docs/api-references/heroui-provider.mdx +++ b/apps/docs/content/docs/api-references/heroui-provider.mdx @@ -151,6 +151,15 @@ interface AppProviderProps { +`spinnerVariant` + +- **Description**: The default variant of the spinner. +- **Type**: `string` | `undefined` +- **Possible Values**: `default` | `simple` | `gradient` | `wave` | `dots` | `spinner` +- **Default**: `default` + + + `disableAnimation` - **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size. diff --git a/packages/core/system/src/types.ts b/packages/core/system/src/types.ts index 66fcfa5ee..071b22fb2 100644 --- a/packages/core/system/src/types.ts +++ b/packages/core/system/src/types.ts @@ -19,4 +19,4 @@ export type SupportedCalendars = /** * Spinner Variants */ -export type SpinnerVariants = "default" | "gradient" | "wave" | "dots" | "spinner"; +export type SpinnerVariants = "default" | "simple" | "gradient" | "wave" | "dots" | "spinner";