chore: spinner variants updated

.changeset/tall-oranges-explode.md

@@ -0,0 +1,5 @@
+---
+"@heroui/system": patch
+---
+
+Update spinner variants

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);

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";
+
+
+<img
+  src="/blog/v2.7.0_2x.jpg"
+  width={700}
+  height={350}
+  alt="HeroUI v2.7.0"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+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
+
+<Spacer y={4} />
+
+**Upgrade today by using one of the following methods**:
+
+1. Upgrading HeroUI using the `cli`
+
+<PackageManagers
+  commands={{
+    cli: "heroui upgrade --all",
+    npm: "npx heroui-cli@latest upgrade --all",
+  }}
+/>
+
+2. Upgrading HeroUI using package managers
+
+<PackageManagers
+  commands={{
+    npm: "npm install @heroui/react@latest",
+    pnpm: "pnpm add @heroui/react@latest",
+    yarn: "yarn add @heroui/react@latest",
+    bun: "bun add @heroui/react@latest",
+  }}
+/>
+
+<Spacer y={4} />
+
+## 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 (
+    <HeroUIProvider>
+      <ToastProvider />
+        {children}
+    </HeroUIProvider>
+  )
+}
+```
+
+### Basic Usage
+
+```tsx
+import {Button, addToast} from "@heroui/react";
+
+function Example() {
+  return (
+    <Button 
+      onPress={() => {
+        addToast({
+          title: "Success",
+          description: "Your changes have been saved successfully.",
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+}
+```
+
+<CodeDemo
+  title="Simple Usage"
+  files={simpleToast}
+/>
+
+
+### 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
+
+<CodeDemo title="Toast Examples" files={toastUsage} />
+
+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.
+
+<CodeDemo title="Number Input Usage" files={numberInputContent} />
+
+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.
+
+<CodeDemo title="New Spinner Variants" files={spinnerVariantsContent} />
+
+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
+      isVirtualized
+      itemHeight={50} // Required for virtualization
+    >
+      {/* Table content */}
+    </Table>
+  );
+}
+```
+
+<CodeDemo title="Table Virtualization" files={tableVirtualizationContent} />
+
+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 (
+    <HeroUIProvider labelPlacement="outside">
+      {/* All form components will have outside labels by default */}
+    </HeroUIProvider>
+  );
+}
+```
+
+#### 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 (
+    <HeroUIProvider spinnerVariant="simple">
+      {/* All components will use the dots spinner variant by default */}
+    </HeroUIProvider>
+  );
+}
+```
+
+You can combine multiple global props to maintain consistent behavior throughout your application:
+
+```tsx
+import {HeroUIProvider} from "@heroui/react";
+
+function App() {
+  return (
+    <HeroUIProvider 
+      labelPlacement="outside"
+      spinnerVariant="simple"
+    >
+      {/* Your app content */}
+    </HeroUIProvider>
+  );
+}
+```
+
+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). 

apps/docs/content/components/toast/simple.raw.jsx

@@ -0,0 +1,18 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        onPress={() => {
+          addToast({
+            title: "Success",
+            description: "Your changes have been saved successfully.",
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
+}

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,
+};

apps/docs/content/docs/api-references/heroui-provider.mdx

@@ -151,6 +151,15 @@ interface AppProviderProps {
 
 <Spacer y={2}/>
 
+`spinnerVariant`
+
+- **Description**: The default variant of the spinner.
+- **Type**: `string` | `undefined`
+- **Possible Values**: `default` | `simple` | `gradient` | `wave` | `dots` | `spinner`
+- **Default**: `default`
+
+<Spacer y={2}/>
+
 `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.

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";