chore: update pkg versions to alpha 11 migrate spinner styles, and enhance component exports

.changeset/pre.json

@@ -2,8 +2,8 @@
   "mode": "pre",
   "tag": "alpha",
   "initialVersions": {
-    "@heroui/react": "3.0.0-alpha.10",
-    "@heroui/styles": "3.0.0-alpha.10"
+    "@heroui/react": " 3.0.0-alpha.11",
+    "@heroui/styles": " 3.0.0-alpha.11"
   },
   "changesets": ["pink-monkeys-notice"]
 }

.claude/agents/storybook-debugger.md

@@ -21,7 +21,7 @@ You specialize in:
 1. **Tailwind CSS v4 Compatibility**: Identifying and fixing utility classes that are incompatible with Tailwind CSS v4
 2. **CSS-to-JS Transformation**: Debugging the build-css script that converts .css files to .js modules
 3. **Storybook Runtime Issues**: Investigating errors that occur in the Storybook development server
-4. **Component Styling**: Ensuring CSS classes from @heroui/core are properly applied in @heroui/react components
+4. **Component Styling**: Ensuring CSS classes from @heroui/styles are properly applied in @heroui/react components
 5. **Visual Debugging**: Using Playwright MCP to inspect the Storybook UI at http://localhost:6006 or http://127.0.0.1:6006
 
 ## Project Structure Knowledge
@@ -29,7 +29,7 @@ You specialize in:
 - **Storybook Path**: `/Users/juniorgarcia/workspace/heroui_v3/packages/storybook`
 - **Core Package**: `/Users/juniorgarcia/workspace/heroui_v3/packages/core` (generates CSS classes)
 - **React Package**: `/Users/juniorgarcia/workspace/heroui_v3/packages/react` (consumes CSS classes)
-- **Global Styles**: `packages/storybook/styles/globals.css` (loads @heroui/core plugin)
+- **Global Styles**: `packages/storybook/styles/globals.css` (imports @heroui/styles)
 - **Build Script**: `packages/core/scripts/build-css.mjs` (transforms CSS to JS)
 - **Plugin**: `packages/core/plugin.ts` (injects styles into Tailwind)
 

.claude/agents/style-migrator.md

@@ -34,7 +34,7 @@ When presented with a component to migrate:
 
 ### 2. CSS File Creation
 
-Create a new `.css` file in `@heroui/core/src/components/` with:
+Create a new `.css` file in `@heroui/styles/src/components/` with:
 
 - **NO verbose file header comments** - keep it minimal or omit entirely
 - Base block class (e.g., `.chip`) containing all base styles

CLAUDE.md

@@ -129,7 +129,7 @@ component-name/
 
 **Migration to CSS-based Styling**:
 
-- The `button` component has been migrated to use CSS styles from `@heroui/core/src/components/button.css`
+- The `button` component has been migrated to use CSS styles from `@heroui/styles/src/components/button.css`
 - This approach allows for better customization through CSS utilities and `@utility` directives
 - Other components will gradually be migrated to follow this CSS-based pattern
 - Components use `tv()` from `tailwind-variants` to map variant props to BEM class names

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "dev": "turbo dev --filter=@heroui/storybook",
     "dev:docs": "turbo dev --filter=@heroui/docs",
-    "build": "turbo build --filter=@heroui/core --filter=@heroui/react",
+    "build": "turbo build --filter=@heroui/styles --filter=@heroui/react",
     "build:docs": "turbo build --filter=@heroui/docs",
     "build:react": "turbo build --filter=@heroui/react",
     "build:storybook": "turbo build --filter=@heroui/storybook",
@@ -42,7 +42,7 @@
     "clean": "pnpm clean:cache && pnpm i",
     "clean:cache": "find . \\( -name '.turbo' -o -name '.next' -o -name 'dist' -o -name 'node_modules' -o -name '.source' -o -name '.contentlayer' -o -name 'pnpm-lock.yaml' \\) -type d -prune -exec rm -rf '{}' +",
     "upli": "pnpm up --filter \"./**\"  -L -i",
-    "postinstall": "husky install && pnpm --filter @heroui/core build"
+    "postinstall": "husky install && pnpm --filter @heroui/styles build"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.5.1",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/react",
-  "version": "3.0.0-alpha.10",
+  "version": " 3.0.0-alpha.11",
   "description": "🚀 Beautiful and modern React UI library built with Tailwind CSS 4.0.",
   "license": "MIT",
   "sideEffects": false,

packages/react/src/components/accordion/index.ts

@@ -1,2 +1,4 @@
 export {default as Accordion} from "./accordion";
-export * from "./accordion.styles";
+export type {AccordionProps} from "./accordion";
+export {accordionVariants} from "./accordion.styles";
+export type {AccordionVariants} from "./accordion.styles";

packages/react/src/components/avatar/index.ts

@@ -1,2 +1,4 @@
 export {default as Avatar} from "./avatar";
-export * from "./avatar.styles";
+export type {AvatarProps} from "./avatar";
+export {avatarVariants} from "./avatar.styles";
+export type {AvatarVariants} from "./avatar.styles";

packages/react/src/components/button/index.ts

@@ -1,2 +1,4 @@
-export type {ButtonProps} from "./button";
 export {Button} from "./button";
+export type {ButtonProps} from "./button";
+export {buttonVariants} from "./button.styles";
+export type {ButtonVariants} from "./button.styles";

packages/react/src/components/chip/index.ts

@@ -1,2 +1,4 @@
-export {Chip, type ChipProps} from "./chip";
-export {chipVariants, type ChipVariants} from "./chip.styles";
+export {Chip} from "./chip";
+export type {ChipProps} from "./chip";
+export {chipVariants} from "./chip.styles";
+export type {ChipVariants} from "./chip.styles";

packages/react/src/components/link/index.ts

@@ -1,2 +1,4 @@
-export {Link, type LinkProps} from "./link";
-export {linkVariants, type LinkVariants} from "./link.styles";
+export {Link} from "./link";
+export type {LinkProps} from "./link";
+export {linkVariants} from "./link.styles";
+export type {LinkVariants} from "./link.styles";

packages/react/src/components/link/link.stories.tsx

@@ -21,15 +21,14 @@ const Template = (_props: LinkProps) => (
     <Link isDisabled href="#">
       Call to action <LinkIcon className="text-muted absolute -right-2 top-1" />
     </Link>
-    {/* <Link
+    <Link
+      className="button button--md button--tertiary relative h-8 pr-5"
       href="https://heroui.com"
+      rel="noopener noreferrer"
       target="_blank"
-      className={(renderProps) =>
-        buttonVariants({...renderProps, className: "hover:no-underline", variant: "ghost"})
-      }
     >
-      Call to action
-    </Link> */}
+      HeroUI <LinkIcon className="absolute right-3 top-1 h-2 w-2 text-inherit" />
+    </Link>
   </div>
 );
 

packages/react/src/components/popover/index.ts

@@ -1,3 +1,4 @@
 export {default as Popover} from "./popover";
 export type {PopoverProps, PopoverContentProps} from "./popover";
-export * from "./popover.styles";
+export {popoverVariants} from "./popover.styles";
+export type {PopoverVariants} from "./popover.styles";

packages/react/src/components/radio/index.ts

@@ -1,5 +1,4 @@
 export {Radio, RadioGroup} from "./radio";
-export {radioVariants, radioGroupVariants, type RadioGroupVariants} from "./radio.styles";
 export type {
   RadioGroupRootProps,
   RadioGroupProps,
@@ -9,3 +8,5 @@ export type {
   RadioIndicatorProps,
   RadioLabelProps,
 } from "./radio";
+export {radioVariants, radioGroupVariants} from "./radio.styles";
+export type {RadioGroupVariants} from "./radio.styles";

packages/react/src/components/spinner/index.ts

@@ -1,2 +1,4 @@
-export {Spinner, type SpinnerProps} from "./spinner";
-export {spinnerVariants, type SpinnerVariants} from "./spinner.styles";
+export {Spinner} from "./spinner";
+export type {SpinnerProps} from "./spinner";
+export {spinnerVariants} from "./spinner.styles";
+export type {SpinnerVariants} from "./spinner.styles";

packages/react/src/components/spinner/spinner.stories.tsx

@@ -17,13 +17,10 @@ export default {
     },
   },
   component: Spinner,
-  title: "📝 ToDo/Spinner",
+  title: "✅ Ready/Spinner",
 } as Meta<typeof Spinner>;
 
-const defaultArgs: SpinnerProps = {
-  color: "accent",
-  size: "sm",
-};
+const defaultArgs: SpinnerProps = {};
 
 const Template = (props: SpinnerProps) => (
   <div className="flex items-center gap-3">
@@ -31,7 +28,63 @@ const Template = (props: SpinnerProps) => (
   </div>
 );
 
+const ColorsTemplate = (props: SpinnerProps) => (
+  <div className="flex items-center gap-8">
+    <div className="flex flex-col items-center gap-2">
+      <Spinner color="accent" {...props} />
+      <span className="text-muted-foreground text-xs">Accent</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner color="current" {...props} />
+      <span className="text-muted-foreground text-xs">Current</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner color="success" {...props} />
+      <span className="text-muted-foreground text-xs">Success</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner color="warning" {...props} />
+      <span className="text-muted-foreground text-xs">Warning</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner color="danger" {...props} />
+      <span className="text-muted-foreground text-xs">Danger</span>
+    </div>
+  </div>
+);
+
+const SizesTemplate = (props: SpinnerProps) => (
+  <div className="flex items-center gap-8">
+    <div className="flex flex-col items-center gap-2">
+      <Spinner size="sm" {...props} />
+      <span className="text-muted-foreground text-xs">Small</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner size="md" {...props} />
+      <span className="text-muted-foreground text-xs">Medium</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner size="lg" {...props} />
+      <span className="text-muted-foreground text-xs">Large</span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Spinner size="xl" {...props} />
+      <span className="text-muted-foreground text-xs">Extra Large</span>
+    </div>
+  </div>
+);
+
 export const Default = {
   args: defaultArgs,
   render: Template,
 };
+
+export const Colors = {
+  args: defaultArgs,
+  render: ColorsTemplate,
+};
+
+export const Sizes = {
+  args: defaultArgs,
+  render: SizesTemplate,
+};

packages/react/src/components/spinner/spinner.styles.ts

@@ -3,24 +3,24 @@ import type {VariantProps} from "tailwind-variants";
 import {tv} from "tailwind-variants";
 
 export const spinnerVariants = tv({
-  base: "relative animate-spin",
+  base: "spinner",
   defaultVariants: {
     color: "current",
     size: "md",
   },
   variants: {
     color: {
-      accent: "text-accent",
-      current: "text-current",
-      danger: "text-danger",
-      success: "text-success",
-      warning: "text-warning",
+      accent: "spinner--accent",
+      current: "spinner--current",
+      danger: "spinner--danger",
+      success: "spinner--success",
+      warning: "spinner--warning",
     },
     size: {
-      lg: "size-8",
-      md: "size-6",
-      sm: "size-4",
-      xl: "size-10",
+      lg: "spinner--lg",
+      md: "spinner--md",
+      sm: "spinner--sm",
+      xl: "spinner--xl",
     },
   },
 });

packages/react/src/components/switch/index.ts

@@ -1,5 +1,4 @@
 export {Switch, SwitchGroup} from "./switch";
-export {switchVariants, switchGroupVariants, type SwitchGroupVariants} from "./switch.styles";
 export type {
   SwitchGroupRootProps,
   SwitchGroupProps,
@@ -9,3 +8,5 @@ export type {
   SwitchControlProps,
   SwitchLabelProps,
 } from "./switch";
+export {switchVariants, switchGroupVariants} from "./switch.styles";
+export type {SwitchGroupVariants} from "./switch.styles";

packages/react/src/components/tooltip/index.ts

@@ -1,3 +1,4 @@
 export {default as Tooltip} from "./tooltip";
 export type {TooltipProps, TooltipContentProps} from "./tooltip";
-export {tooltipVariants, type TooltipVariants} from "./tooltip.styles";
+export {tooltipVariants} from "./tooltip.styles";
+export type {TooltipVariants} from "./tooltip.styles";

packages/styles/components/index.css

@@ -4,4 +4,5 @@
 @import "./chip.css";
 @import "./link.css";
 @import "./popover.css";
+@import "./spinner.css";
 @import "./tooltip.css";

packages/styles/components/spinner.css

@@ -0,0 +1,42 @@
+/* Base spinner styles */
+.spinner {
+  @apply relative animate-spin;
+}
+
+/* Size variants */
+.spinner--sm {
+  @apply size-4;
+}
+
+.spinner--md {
+  @apply size-6;
+}
+
+.spinner--lg {
+  @apply size-8;
+}
+
+.spinner--xl {
+  @apply size-10;
+}
+
+/* Color variants */
+.spinner--current {
+  color: inherit;
+}
+
+.spinner--accent {
+  color: var(--accent);
+}
+
+.spinner--danger {
+  color: var(--danger);
+}
+
+.spinner--success {
+  color: var(--success);
+}
+
+.spinner--warning {
+  color: var(--warning);
+}

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/styles",
-  "version": "3.0.0-alpha.10",
+  "version": " 3.0.0-alpha.11",
   "description": "HeroUI core styles and Tailwind plugin",
   "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",