feat: refactor styles handling across v4 (#10176)

* feat: refactor styles handling across v4

* fix

* fix

* fix

* fix

* fix

* fix

.gitignore

@@ -15,6 +15,7 @@ build
 
 # misc
 .DS_Store
+.eslintcache
 *.pem
 
 # debug
@@ -43,3 +44,4 @@ tsconfig.tsbuildinfo
 .notes
 .playwright-mcp
 shadcn-workspace
+.codex-artifacts

apps/v4/app/(app)/(root)/components/appearance-settings.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
 import {
   Field,
   FieldContent,
@@ -13,11 +15,10 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
-import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
-import { Switch } from "@/examples/radix/ui/switch"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
+} from "@/styles/radix-nova/ui/field"
+import { Input } from "@/styles/radix-nova/ui/input"
+import { RadioGroup, RadioGroupItem } from "@/styles/radix-nova/ui/radio-group"
+import { Switch } from "@/styles/radix-nova/ui/switch"
 
 export function AppearanceSettings() {
   const [gpuCount, setGpuCount] = React.useState(8)

apps/v4/app/(app)/(root)/components/button-group-demo.tsx

@@ -1,8 +1,20 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,18 +27,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
+} from "@/styles/radix-nova/ui/dropdown-menu"
 
 export function ButtonGroupDemo() {
   const [label, setLabel] = React.useState("personal")

apps/v4/app/(app)/(root)/components/button-group-input-group.tsx

@@ -1,20 +1,21 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/examples/radix/ui/input-group"
+} from "@/styles/radix-nova/ui/input-group"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
+} from "@/styles/radix-nova/ui/tooltip"
 
 export function ButtonGroupInputGroup() {
   const [voiceEnabled, setVoiceEnabled] = React.useState(false)

apps/v4/app/(app)/(root)/components/button-group-nested.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+
 export function ButtonGroupNested() {
   return (
     <ButtonGroup>

apps/v4/app/(app)/(root)/components/button-group-popover.tsx

@@ -1,13 +1,14 @@
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { Separator } from "@/examples/radix/ui/separator"
-import { Textarea } from "@/examples/radix/ui/textarea"
-import { BotIcon, ChevronDownIcon } from "lucide-react"
+} from "@/styles/radix-nova/ui/popover"
+import { Separator } from "@/styles/radix-nova/ui/separator"
+import { Textarea } from "@/styles/radix-nova/ui/textarea"
 
 export function ButtonGroupPopover() {
   return (

apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx

@@ -1,10 +1,12 @@
+import { PlusIcon } from "lucide-react"
+
 import {
   Avatar,
   AvatarFallback,
   AvatarGroup,
   AvatarImage,
-} from "@/examples/radix/ui/avatar"
-import { Button } from "@/examples/radix/ui/button"
+} from "@/styles/radix-nova/ui/avatar"
+import { Button } from "@/styles/radix-nova/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -12,8 +14,7 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/examples/radix/ui/empty"
-import { PlusIcon } from "lucide-react"
+} from "@/styles/radix-nova/ui/empty"
 
 export function EmptyAvatarGroup() {
   return (

apps/v4/app/(app)/(root)/components/field-checkbox.tsx

@@ -1,5 +1,5 @@
-import { Checkbox } from "@/examples/radix/ui/checkbox"
-import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
+import { Field, FieldLabel } from "@/styles/radix-nova/ui/field"
 
 export function FieldCheckbox() {
   return (

apps/v4/app/(app)/(root)/components/field-demo.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@/examples/radix/ui/button"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Button } from "@/styles/radix-nova/ui/button"
+import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
 import {
   Field,
   FieldDescription,
@@ -8,8 +8,8 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
+} from "@/styles/radix-nova/ui/field"
+import { Input } from "@/styles/radix-nova/ui/input"
 import {
   Select,
   SelectContent,
@@ -17,8 +17,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/examples/radix/ui/select"
-import { Textarea } from "@/examples/radix/ui/textarea"
+} from "@/styles/radix-nova/ui/select"
+import { Textarea } from "@/styles/radix-nova/ui/textarea"
 
 export function FieldDemo() {
   return (

apps/v4/app/(app)/(root)/components/field-hear.tsx

@@ -1,5 +1,5 @@
-import { Card, CardContent } from "@/examples/radix/ui/card"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Card, CardContent } from "@/styles/radix-nova/ui/card"
+import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
 import {
   Field,
   FieldDescription,
@@ -8,7 +8,7 @@ import {
   FieldLegend,
   FieldSet,
   FieldTitle,
-} from "@/examples/radix/ui/field"
+} from "@/styles/radix-nova/ui/field"
 
 const options = [
   {

apps/v4/app/(app)/(root)/components/field-slider.tsx

@@ -1,8 +1,13 @@
 "use client"
 
 import { useState } from "react"
-import { Field, FieldDescription, FieldTitle } from "@/examples/radix/ui/field"
-import { Slider } from "@/examples/radix/ui/slider"
+
+import {
+  Field,
+  FieldDescription,
+  FieldTitle,
+} from "@/styles/radix-nova/ui/field"
+import { Slider } from "@/styles/radix-nova/ui/slider"
 
 export function FieldSlider() {
   const [value, setValue] = useState([200, 800])

apps/v4/app/(app)/(root)/components/index.tsx

@@ -1,4 +1,4 @@
-import { FieldSeparator } from "@/examples/radix/ui/field"
+import { FieldSeparator } from "@/styles/radix-nova/ui/field"
 
 import { AppearanceSettings } from "./appearance-settings"
 import { ButtonGroupDemo } from "./button-group-demo"

apps/v4/app/(app)/(root)/components/input-group-button.tsx

@@ -1,19 +1,20 @@
 "use client"
 
 import * as React from "react"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/examples/radix/ui/input-group"
-import { Label } from "@/examples/radix/ui/label"
+} from "@/styles/radix-nova/ui/input-group"
+import { Label } from "@/styles/radix-nova/ui/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+} from "@/styles/radix-nova/ui/popover"
 
 export function InputGroupButtonExample() {
   const [isFavorite, setIsFavorite] = React.useState(false)

apps/v4/app/(app)/(root)/components/input-group-demo.tsx

@@ -1,9 +1,12 @@
+import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
+
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
+} from "@/styles/radix-nova/ui/dropdown-menu"
 import {
   InputGroup,
   InputGroupAddon,
@@ -11,15 +14,13 @@ import {
   InputGroupInput,
   InputGroupText,
   InputGroupTextarea,
-} from "@/examples/radix/ui/input-group"
-import { Separator } from "@/examples/radix/ui/separator"
+} from "@/styles/radix-nova/ui/input-group"
+import { Separator } from "@/styles/radix-nova/ui/separator"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
+} from "@/styles/radix-nova/ui/tooltip"
 
 export function InputGroupDemo() {
   return (

apps/v4/app/(app)/(root)/components/item-demo.tsx

@@ -1,4 +1,6 @@
-import { Button } from "@/examples/radix/ui/button"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
 import {
   Item,
   ItemActions,
@@ -6,8 +8,7 @@ import {
   ItemDescription,
   ItemMedia,
   ItemTitle,
-} from "@/examples/radix/ui/item"
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+} from "@/styles/radix-nova/ui/item"
 
 export function ItemDemo() {
   return (

apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx

@@ -1,8 +1,24 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
-import { Badge } from "@/examples/radix/ui/badge"
+import {
+  IconApps,
+  IconArrowUp,
+  IconAt,
+  IconBook,
+  IconCircleDashedPlus,
+  IconPaperclip,
+  IconPlus,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/styles/radix-nova/ui/avatar"
+import { Badge } from "@/styles/radix-nova/ui/badge"
 import {
   Command,
   CommandEmpty,
@@ -10,7 +26,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/examples/radix/ui/command"
+} from "@/styles/radix-nova/ui/command"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -23,36 +39,25 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import { Field, FieldLabel } from "@/examples/radix/ui/field"
+} from "@/styles/radix-nova/ui/dropdown-menu"
+import { Field, FieldLabel } from "@/styles/radix-nova/ui/field"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupTextarea,
-} from "@/examples/radix/ui/input-group"
+} from "@/styles/radix-nova/ui/input-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { Switch } from "@/examples/radix/ui/switch"
+} from "@/styles/radix-nova/ui/popover"
+import { Switch } from "@/styles/radix-nova/ui/switch"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
+} from "@/styles/radix-nova/ui/tooltip"
 
 const SAMPLE_DATA = {
   mentionable: [

apps/v4/app/(app)/(root)/components/spinner-badge.tsx

@@ -1,5 +1,5 @@
-import { Badge } from "@/examples/radix/ui/badge"
-import { Spinner } from "@/examples/radix/ui/spinner"
+import { Badge } from "@/styles/radix-nova/ui/badge"
+import { Spinner } from "@/styles/radix-nova/ui/spinner"
 
 export function SpinnerBadge() {
   return (

apps/v4/app/(app)/(root)/components/spinner-empty.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/examples/radix/ui/button"
+import { Button } from "@/styles/radix-nova/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -6,8 +6,8 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/examples/radix/ui/empty"
-import { Spinner } from "@/examples/radix/ui/spinner"
+} from "@/styles/radix-nova/ui/empty"
+import { Spinner } from "@/styles/radix-nova/ui/spinner"
 
 export function SpinnerEmpty() {
   return (

apps/v4/app/(app)/docs/changelog/page.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link"
-import { Button } from "@/examples/radix/ui/button"
 import { mdxComponents } from "@/mdx-components"
 import { IconRss } from "@tabler/icons-react"
 
 import { getChangelogPages, type ChangelogPageData } from "@/lib/changelog"
 import { absoluteUrl } from "@/lib/utils"
 import { OpenInV0Cta } from "@/components/open-in-v0-cta"
+import { Button } from "@/styles/radix-nova/ui/button"
 
 export const revalidate = false
 export const dynamic = "force-static"

apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx

@@ -1,8 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
 import {
   Field,
   FieldContent,
@@ -13,13 +16,13 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-import { Input } from "@/examples/base/ui-rtl/input"
-import { RadioGroup, RadioGroupItem } from "@/examples/base/ui-rtl/radio-group"
-import { Switch } from "@/examples/base/ui-rtl/switch"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/field"
+import { Input } from "@/styles/base-nova/ui-rtl/input"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/styles/base-nova/ui-rtl/radio-group"
+import { Switch } from "@/styles/base-nova/ui-rtl/switch"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx

@@ -1,22 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
 import {
   ArchiveIcon,
   ArrowLeftIcon,
@@ -30,6 +14,22 @@ import {
 } from "lucide-react"
 
 import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx

@@ -1,22 +1,22 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/examples/base/ui-rtl/input-group"
+} from "@/styles/base-nova/ui-rtl/input-group"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/tooltip"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx

@@ -1,10 +1,10 @@
 "use client"
 
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 
 import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx

@@ -1,17 +1,17 @@
 "use client"
 
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/examples/base/ui-rtl/popover"
-import { Separator } from "@/examples/base/ui-rtl/separator"
-import { Textarea } from "@/examples/base/ui-rtl/textarea"
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/popover"
+import { Separator } from "@/styles/base-nova/ui-rtl/separator"
+import { Textarea } from "@/styles/base-nova/ui-rtl/textarea"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx

@@ -1,12 +1,15 @@
 "use client"
 
+import { PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 import {
   Avatar,
   AvatarFallback,
   AvatarGroup,
   AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-import { Button } from "@/examples/base/ui-rtl/button"
+} from "@/styles/base-nova/ui-rtl/avatar"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
 import {
   Empty,
   EmptyContent,
@@ -14,10 +17,7 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/examples/base/ui-rtl/empty"
-import { PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/empty"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
-
 import { useLanguageContext } from "@/components/language-selector"
+import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
+import { Field, FieldLabel } from "@/styles/base-nova/ui-rtl/field"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/field-demo.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { Button } from "@/examples/base/ui-rtl/button"
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
 import {
   Field,
   FieldDescription,
@@ -10,8 +11,8 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from "@/examples/base/ui-rtl/field"
-import { Input } from "@/examples/base/ui-rtl/input"
+} from "@/styles/base-nova/ui-rtl/field"
+import { Input } from "@/styles/base-nova/ui-rtl/input"
 import {
   Select,
   SelectContent,
@@ -19,10 +20,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/examples/base/ui-rtl/select"
-import { Textarea } from "@/examples/base/ui-rtl/textarea"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/select"
+import { Textarea } from "@/styles/base-nova/ui-rtl/textarea"
 
 const translations = {
   ar: {
@@ -140,7 +139,7 @@ export function FieldDemo() {
               <div className="grid grid-cols-2 gap-4">
                 <Field>
                   <FieldLabel htmlFor="rtl-exp-month">{t.month}</FieldLabel>
-                  <Select defaultValue="" items={months}>
+                  <Select defaultValue="">
                     <SelectTrigger id="rtl-exp-month">
                       <SelectValue placeholder="MM" />
                     </SelectTrigger>
@@ -157,7 +156,7 @@ export function FieldDemo() {
                 </Field>
                 <Field>
                   <FieldLabel htmlFor="rtl-exp-year">{t.year}</FieldLabel>
-                  <Select defaultValue="" items={years}>
+                  <Select defaultValue="">
                     <SelectTrigger id="rtl-exp-year">
                       <SelectValue placeholder="YYYY" />
                     </SelectTrigger>

apps/v4/app/(app)/examples/rtl/components/field-hear.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { Card, CardContent } from "@/examples/base/ui-rtl/card"
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
+import { useLanguageContext } from "@/components/language-selector"
+import { Card, CardContent } from "@/styles/base-nova/ui-rtl/card"
+import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
 import {
   Field,
   FieldDescription,
@@ -10,9 +11,7 @@ import {
   FieldLegend,
   FieldSet,
   FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/field"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/field-slider.tsx

@@ -1,14 +1,14 @@
 "use client"
 
 import { useState } from "react"
+
+import { useLanguageContext } from "@/components/language-selector"
 import {
   Field,
   FieldDescription,
   FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-import { Slider } from "@/examples/base/ui-rtl/slider"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/field"
+import { Slider } from "@/styles/base-nova/ui-rtl/slider"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/index.tsx

@@ -1,13 +1,12 @@
 "use client"
 
-import { DirectionProvider } from "@/examples/base/ui-rtl/direction"
-import { FieldSeparator } from "@/examples/base/ui-rtl/field"
-
 import {
   LanguageProvider,
   LanguageSelector,
   useLanguageContext,
 } from "@/components/language-selector"
+import { DirectionProvider } from "@/styles/base-nova/ui-rtl/direction"
+import { FieldSeparator } from "@/styles/base-nova/ui-rtl/field"
 
 import { AppearanceSettings } from "./appearance-settings"
 import { ButtonGroupDemo } from "./button-group-demo"

apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx

@@ -1,21 +1,21 @@
 "use client"
 
 import * as React from "react"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/examples/base/ui-rtl/input-group"
-import { Label } from "@/examples/base/ui-rtl/label"
+} from "@/styles/base-nova/ui-rtl/input-group"
+import { Label } from "@/styles/base-nova/ui-rtl/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/examples/base/ui-rtl/popover"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/popover"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx

@@ -1,25 +1,5 @@
 "use client"
 
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/examples/base/ui-rtl/input-group"
-import { Separator } from "@/examples/base/ui-rtl/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
 import {
   IconCheck,
   IconChevronDown,
@@ -29,6 +9,26 @@ import {
 import { ArrowUpIcon, Search } from "lucide-react"
 
 import { useLanguageContext } from "@/components/language-selector"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/styles/base-nova/ui-rtl/input-group"
+import { Separator } from "@/styles/base-nova/ui-rtl/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/base-nova/ui-rtl/tooltip"
 
 const translations = {
   ar: {
@@ -131,7 +131,7 @@ export function InputGroupDemo() {
         <InputGroupInput placeholder="shadcn" />
         <InputGroupAddon align="inline-end">
           <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
-            <IconCheck className="size-3 text-background" />
+            <IconCheck className="size-3 text-white" />
           </div>
         </InputGroupAddon>
       </InputGroup>

apps/v4/app/(app)/examples/rtl/components/item-demo.tsx

@@ -1,6 +1,9 @@
 "use client"
 
-import { Button } from "@/examples/base/ui-rtl/button"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
 import {
   Item,
   ItemActions,
@@ -8,10 +11,7 @@ import {
   ItemDescription,
   ItemMedia,
   ItemTitle,
-} from "@/examples/base/ui-rtl/item"
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/item"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx

@@ -1,47 +1,6 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-import { Badge } from "@/examples/base/ui-rtl/badge"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/examples/base/ui-rtl/command"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/examples/base/ui-rtl/input-group"
-import { Popover, PopoverContent } from "@/examples/base/ui-rtl/popover"
-import { Switch } from "@/examples/base/ui-rtl/switch"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
 import {
   IconApps,
   IconArrowUp,
@@ -55,6 +14,47 @@ import {
 } from "@tabler/icons-react"
 
 import { useLanguageContext } from "@/components/language-selector"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/styles/base-nova/ui-rtl/avatar"
+import { Badge } from "@/styles/base-nova/ui-rtl/badge"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/styles/base-nova/ui-rtl/command"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+import { Field, FieldLabel } from "@/styles/base-nova/ui-rtl/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/styles/base-nova/ui-rtl/input-group"
+import { Popover, PopoverContent } from "@/styles/base-nova/ui-rtl/popover"
+import { Switch } from "@/styles/base-nova/ui-rtl/switch"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/base-nova/ui-rtl/tooltip"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { Badge } from "@/examples/base/ui-rtl/badge"
-import { Spinner } from "@/examples/base/ui-rtl/spinner"
-
 import { useLanguageContext } from "@/components/language-selector"
+import { Badge } from "@/styles/base-nova/ui-rtl/badge"
+import { Spinner } from "@/styles/base-nova/ui-rtl/spinner"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Button } from "@/examples/base/ui-rtl/button"
+import { useLanguageContext } from "@/components/language-selector"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
 import {
   Empty,
   EmptyContent,
@@ -8,10 +9,8 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/examples/base/ui-rtl/empty"
-import { Spinner } from "@/examples/base/ui-rtl/spinner"
-
-import { useLanguageContext } from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/empty"
+import { Spinner } from "@/styles/base-nova/ui-rtl/spinner"
 
 const translations = {
   ar: {

apps/v4/app/(create)/components/action-menu.tsx

@@ -1,6 +1,8 @@
 "use client"
 
 import Script from "next/script"
+import { type RegistryItem } from "shadcn/schema"
+
 import {
   Command,
   CommandDialog,
@@ -9,9 +11,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/examples/base/ui/command"
-import { type RegistryItem } from "shadcn/schema"
-
+} from "@/styles/base-nova/ui/command"
 import { useActionMenu } from "@/app/(create)/hooks/use-action-menu"
 
 export const CMD_K_FORWARD_TYPE = "cmd-k-forward"

apps/v4/app/(create)/components/copy-preset.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
 
 import { cn } from "@/lib/utils"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/styles/base-nova/ui/button"
 import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 
 export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {

apps/v4/app/(create)/components/customizer.tsx

@@ -1,17 +1,17 @@
 "use client"
 
 import * as React from "react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { getThemesForBaseColor, STYLES } from "@/registry/config"
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
-} from "@/examples/base/ui/card"
-import { FieldGroup, FieldSeparator } from "@/examples/base/ui/field"
-import { type RegistryItem } from "shadcn/schema"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { getThemesForBaseColor, STYLES } from "@/registry/config"
+} from "@/styles/base-nova/ui/card"
+import { FieldGroup, FieldSeparator } from "@/styles/base-nova/ui/field"
 import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
 import { ActionMenu } from "@/app/(create)/components/action-menu"
 import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"

apps/v4/app/(create)/components/history-buttons.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import Script from "next/script"
-import { Button } from "@/examples/base/ui/button"
 import { Redo02Icon, Undo02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
+import { Button } from "@/styles/base-nova/ui/button"
 import { useHistory } from "@/app/(create)/hooks/use-history"
 
 export const UNDO_FORWARD_TYPE = "undo-forward"

apps/v4/app/(create)/components/item-explorer.tsx

@@ -2,11 +2,16 @@
 
 import * as React from "react"
 import Link from "next/link"
+import { ChevronRightIcon } from "lucide-react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { cn } from "@/lib/utils"
+import { type Base } from "@/registry/bases"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/examples/base/ui/collapsible"
+} from "@/styles/base-nova/ui/collapsible"
 import {
   Sidebar,
   SidebarContent,
@@ -15,12 +20,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/examples/base/ui/sidebar"
-import { ChevronRightIcon } from "lucide-react"
-import { type RegistryItem } from "shadcn/schema"
-
-import { cn } from "@/lib/utils"
-import { type Base } from "@/registry/bases"
+} from "@/styles/base-nova/ui/sidebar"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 import { groupItemsByType } from "@/app/(create)/lib/utils"
 

apps/v4/app/(create)/components/main-menu.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { type Button } from "@/examples/base/ui/button"
 import { Menu09Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
+import { type Button } from "@/styles/base-nova/ui/button"
 import {
   Picker,
   PickerContent,

apps/v4/app/(create)/components/mode-switcher.tsx

@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import Script from "next/script"
-import { Button } from "@/examples/base/ui/button"
 
 import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-nova/ui/button"
 import { useThemeToggle } from "@/app/(create)/hooks/use-theme-toggle"
 
 export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"

apps/v4/app/(create)/components/project-form.tsx

@@ -1,7 +1,14 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
+import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { BASES, type BaseName } from "@/registry/config"
+import { Button } from "@/styles/base-nova/ui/button"
 import {
   Dialog,
   DialogContent,
@@ -10,7 +17,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/examples/base/ui/dialog"
+} from "@/styles/base-nova/ui/dialog"
 import {
   Field,
   FieldContent,
@@ -20,22 +27,15 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/examples/base/ui/field"
-import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
-import { Switch } from "@/examples/base/ui/switch"
+} from "@/styles/base-nova/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/styles/base-nova/ui/radio-group"
+import { Switch } from "@/styles/base-nova/ui/switch"
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@/examples/base/ui/tabs"
-import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { cn } from "@/lib/utils"
-import { useConfig } from "@/hooks/use-config"
-import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { BASES, type BaseName } from "@/registry/config"
+} from "@/styles/base-nova/ui/tabs"
 import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 import {
   useDesignSystemSearchParams,

apps/v4/app/(create)/components/random-button.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 import Script from "next/script"
-import { Button } from "@/examples/base/ui/button"
 import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-nova/ui/button"
 import { useRandom } from "@/app/(create)/hooks/use-random"
 import { RESET_FORWARD_TYPE } from "@/app/(create)/hooks/use-reset"
 

apps/v4/app/(create)/components/reset-button.tsx

@@ -9,8 +9,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/examples/base/ui/alert-dialog"
-
+} from "@/styles/base-nova/ui/alert-dialog"
 import { useReset } from "@/app/(create)/hooks/use-reset"
 
 export function ResetDialog() {

apps/v4/app/(create)/components/share-button.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
 import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/styles/base-nova/ui/button"
 import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 

apps/v4/app/(create)/components/v0-button.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
-import { Skeleton } from "@/examples/base/ui/skeleton"
 
 import { cn } from "@/lib/utils"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { useMounted } from "@/hooks/use-mounted"
 import { Icons } from "@/components/icons"
+import { Button } from "@/styles/base-nova/ui/button"
+import { Skeleton } from "@/styles/base-nova/ui/skeleton"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function V0Button({ className }: { className?: string }) {

apps/v4/app/(create)/components/welcome-dialog.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/styles/base-nova/ui/button"
 import {
   Dialog,
   DialogClose,
@@ -10,9 +12,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/examples/base/ui/dialog"
-
-import { Icons } from "@/components/icons"
+} from "@/styles/base-nova/ui/dialog"
 
 const STORAGE_KEY = "shadcn-create-welcome-dialog"
 

apps/v4/app/(view)/view/[style]/[name]/page.tsx

@@ -12,7 +12,7 @@ import {
 import { absoluteUrl } from "@/lib/utils"
 import { getStyle, legacyStyles, type Style } from "@/registry/_legacy-styles"
 
-import "@/styles/legacy-themes.css"
+import "@/app/legacy-themes.css"
 
 import { ComponentPreview } from "./component-preview"
 

apps/v4/app/layout.tsx

@@ -13,7 +13,7 @@ import { TooltipProvider as BaseTooltipProvider } from "@/registry/bases/base/ui
 import { Toaster } from "@/registry/bases/radix/ui/sonner"
 import { TooltipProvider as RadixTooltipProvider } from "@/registry/bases/radix/ui/tooltip"
 
-import "@/styles/globals.css"
+import "@/app/globals.css"
 
 export const metadata: Metadata = {
   title: {

apps/v4/components/component-preview-tabs.tsx

@@ -2,11 +2,6 @@
 
 import * as React from "react"
 import Link from "next/link"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/base/ui/popover"
 import { IconAlertCircle } from "@tabler/icons-react"
 
 import { cn } from "@/lib/utils"
@@ -21,6 +16,11 @@ import { DirectionProvider as BaseDirectionProvider } from "@/registry/bases/bas
 import { DirectionProvider as RadixDirectionProvider } from "@/registry/bases/radix/ui/direction"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/styles/base-nova/ui/popover"
 
 export function ComponentPreviewTabs({
   className,

apps/v4/components/language-selector.tsx

@@ -1,6 +1,8 @@
 "use client"
 
 import * as React from "react"
+
+import { cn } from "@/lib/utils"
 import {
   Select,
   SelectContent,
@@ -8,9 +10,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/examples/base/ui/select"
-
-import { cn } from "@/lib/utils"
+} from "@/styles/base-nova/ui/select"
 
 export type Language = "en" | "ar" | "he"
 

apps/v4/components/open-in-v0-cta.tsx

@@ -1,6 +1,5 @@
-import { Button } from "@/examples/base/ui/button"
-
 import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
   return (

apps/v4/components/site-header.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link"
-import { Button } from "@/examples/radix/ui/button"
 import { PlusSignIcon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
@@ -14,6 +13,7 @@ import { MobileNav } from "@/components/mobile-nav"
 import { ModeSwitcher } from "@/components/mode-switcher"
 import { SiteConfig } from "@/components/site-config"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { Button } from "@/styles/radix-nova/ui/button"
 import { ProjectForm } from "@/app/(create)/components/project-form"
 import { V0Button } from "@/app/(create)/components/v0-button"
 

apps/v4/components/theme-selector.tsx

@@ -1,6 +1,9 @@
 "use client"
 
-import { Label } from "@/examples/base/ui/label"
+import { THEMES } from "@/lib/themes"
+import { cn } from "@/lib/utils"
+import { useThemeConfig } from "@/components/active-theme"
+import { Label } from "@/styles/base-nova/ui/label"
 import {
   Select,
   SelectContent,
@@ -9,11 +12,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "@/examples/base/ui/select"
-
-import { THEMES } from "@/lib/themes"
-import { cn } from "@/lib/utils"
-import { useThemeConfig } from "@/components/active-theme"
+} from "@/styles/base-nova/ui/select"
 
 import { CopyCodeButton } from "./theme-customizer"
 

apps/v4/examples/README.md

@@ -7,17 +7,11 @@ This directory contains demo components for the component documentation.
 ```
 examples
 ├── base
-│   ├── ui           # Auto-generated by build-registry.mts
-│   ├── lib          # Auto-generated by build-registry.mts
-│   ├── hooks        # Auto-generated by build-registry.mts
 │   ├── button-demo.tsx
 │   └── ...
 ├── radix
-│   ├── ui           # Auto-generated by build-registry.mts
-│   ├── lib          # Auto-generated by build-registry.mts
-│   ├── hooks        # Auto-generated by build-registry.mts
 │   └── ...
-└── __index__.tsx     # Auto-generated by build-registry.mts
+└── __index__.tsx    # Auto-generated by registry:build
 ```
 
 ## Adding a New Example
@@ -26,17 +20,17 @@ examples
 
 ```tsx
 // examples/base/button-loading.tsx
-import { Button } from "@/examples/base/ui/button"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function ButtonLoading() {
   return <Button disabled>Loading...</Button>
 }
 ```
 
-2. Run the examples build to regenerate the index:
+2. Run the registry build to regenerate the index:
 
 ```bash
-pnpm examples:build
+pnpm --filter=v4 registry:build
 ```
 
 3. Use the example in documentation by referencing its name (filename without `.tsx`):
@@ -47,7 +41,7 @@ pnpm examples:build
 
 ## Notes
 
-- The `ui`, `lib`, and `hooks` directories are auto-generated during `pnpm registry:build`. Do not edit files in these directories directly.
 - Example files should be placed directly in `examples/base` or `examples/radix`, not in subdirectories.
+- Base examples should import from `@/styles/base-nova/*`. Radix examples should import from `@/styles/radix-nova/*`.
 - Both named exports and default exports are supported.
-- After adding or removing examples, run `pnpm examples:build` to update the index.
+- After adding or removing examples, run `pnpm --filter=v4 registry:build` to update the index.

apps/v4/examples/__index__.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-// This file is autogenerated by scripts/build-examples-index.mts
+// This file is autogenerated by scripts/build-registry.mts
 // Do not edit this file directly.
 import * as React from "react"
 

apps/v4/examples/base/accordion-basic.tsx

@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/examples/base/ui/accordion"
+} from "@/styles/base-nova/ui/accordion"
 
 const items = [
   {

apps/v4/examples/base/accordion-borders.tsx

@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/examples/base/ui/accordion"
+} from "@/styles/base-nova/ui/accordion"
 
 const items = [
   {

apps/v4/examples/base/accordion-card.tsx

@@ -3,14 +3,14 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/examples/base/ui/accordion"
+} from "@/styles/base-nova/ui/accordion"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/examples/base/ui/card"
+} from "@/styles/base-nova/ui/card"
 
 const items = [
   {

apps/v4/examples/base/accordion-demo.tsx

@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/examples/base/ui/accordion"
+} from "@/styles/base-nova/ui/accordion"
 
 export default function AccordionDemo() {
   return (

apps/v4/examples/base/accordion-disabled.tsx

@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/examples/base/ui/accordion"
+} from "@/styles/base-nova/ui/accordion"
 
 export default function AccordionDisabled() {
   return (

apps/v4/examples/base/accordion-multiple.tsx

@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/examples/base/ui/accordion"
+} from "@/styles/base-nova/ui/accordion"
 
 const items = [
   {

apps/v4/examples/base/accordion-rtl.tsx

@@ -1,17 +1,17 @@
 "use client"
 
 import * as React from "react"
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/examples/base/ui-rtl/accordion"
 
 import {
   useTranslation,
   type Translations,
 } from "@/components/language-selector"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/styles/base-nova/ui-rtl/accordion"
 
 const translations: Translations = {
   en: {

apps/v4/examples/base/alert-action.tsx

@@ -3,8 +3,8 @@ import {
   AlertAction,
   AlertDescription,
   AlertTitle,
-} from "@/examples/base/ui/alert"
-import { Button } from "@/examples/base/ui/button"
+} from "@/styles/base-nova/ui/alert"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export default function AlertActionExample() {
   return (

apps/v4/examples/base/alert-basic.tsx

@@ -1,6 +1,11 @@
-import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
 import { CheckCircle2Icon } from "lucide-react"
 
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/styles/base-nova/ui/alert"
+
 export default function AlertBasic() {
   return (
     <Alert className="max-w-md">

apps/v4/examples/base/alert-colors.tsx

@@ -1,6 +1,11 @@
-import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
 import { AlertTriangleIcon } from "lucide-react"
 
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/styles/base-nova/ui/alert"
+
 export default function AlertColors() {
   return (
     <Alert className="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">

apps/v4/examples/base/alert-demo.tsx

@@ -1,6 +1,11 @@
-import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
 import { CheckCircle2Icon, InfoIcon } from "lucide-react"
 
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/styles/base-nova/ui/alert"
+
 export default function AlertDemo() {
   return (
     <div className="grid w-full max-w-md items-start gap-4">

apps/v4/examples/base/alert-destructive.tsx

@@ -1,6 +1,11 @@
-import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
 import { AlertCircleIcon } from "lucide-react"
 
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/styles/base-nova/ui/alert"
+
 export default function AlertDestructive() {
   return (
     <Alert variant="destructive" className="max-w-md">

apps/v4/examples/base/alert-dialog-basic.tsx

@@ -8,8 +8,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui/alert-dialog"
-import { Button } from "@/examples/base/ui/button"
+} from "@/styles/base-nova/ui/alert-dialog"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function AlertDialogBasic() {
   return (

apps/v4/examples/base/alert-dialog-demo.tsx

@@ -8,8 +8,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui/alert-dialog"
-import { Button } from "@/examples/base/ui/button"
+} from "@/styles/base-nova/ui/alert-dialog"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export default function AlertDialogDemo() {
   return (

apps/v4/examples/base/alert-dialog-destructive.tsx

@@ -1,3 +1,5 @@
+import { Trash2Icon } from "lucide-react"
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -9,9 +11,8 @@ import {
   AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui/alert-dialog"
-import { Button } from "@/examples/base/ui/button"
-import { Trash2Icon } from "lucide-react"
+} from "@/styles/base-nova/ui/alert-dialog"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function AlertDialogDestructive() {
   return (

apps/v4/examples/base/alert-dialog-media.tsx

@@ -1,3 +1,5 @@
+import { CircleFadingPlusIcon } from "lucide-react"
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -9,9 +11,8 @@ import {
   AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui/alert-dialog"
-import { Button } from "@/examples/base/ui/button"
-import { CircleFadingPlusIcon } from "lucide-react"
+} from "@/styles/base-nova/ui/alert-dialog"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function AlertDialogWithMedia() {
   return (

apps/v4/examples/base/alert-dialog-rtl.tsx

@@ -1,5 +1,11 @@
 "use client"
 
+import { BluetoothIcon } from "lucide-react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,14 +17,8 @@ import {
   AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui-rtl/alert-dialog"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { BluetoothIcon } from "lucide-react"
-
-import {
-  useTranslation,
-  type Translations,
-} from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/alert-dialog"
+import { Button } from "@/styles/base-nova/ui-rtl/button"
 
 const translations: Translations = {
   en: {

apps/v4/examples/base/alert-dialog-small-media.tsx

@@ -1,3 +1,5 @@
+import { BluetoothIcon } from "lucide-react"
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -9,9 +11,8 @@ import {
   AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui/alert-dialog"
-import { Button } from "@/examples/base/ui/button"
-import { BluetoothIcon } from "lucide-react"
+} from "@/styles/base-nova/ui/alert-dialog"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function AlertDialogSmallWithMedia() {
   return (

apps/v4/examples/base/alert-dialog-small.tsx

@@ -8,8 +8,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/examples/base/ui/alert-dialog"
-import { Button } from "@/examples/base/ui/button"
+} from "@/styles/base-nova/ui/alert-dialog"
+import { Button } from "@/styles/base-nova/ui/button"
 
 export function AlertDialogSmall() {
   return (

apps/v4/examples/base/alert-rtl.tsx

@@ -1,17 +1,17 @@
 "use client"
 
 import * as React from "react"
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/examples/base/ui-rtl/alert"
 import { CheckCircle2Icon, InfoIcon } from "lucide-react"
 
 import {
   useTranslation,
   type Translations,
 } from "@/components/language-selector"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/styles/base-nova/ui-rtl/alert"
 
 const translations: Translations = {
   en: {

apps/v4/examples/base/aspect-ratio-demo.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image"
-import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+import { AspectRatio } from "@/styles/base-nova/ui/aspect-ratio"
 
 export default function AspectRatioDemo() {
   return (

apps/v4/examples/base/aspect-ratio-portrait.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image"
-import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+import { AspectRatio } from "@/styles/base-nova/ui/aspect-ratio"
 
 export function AspectRatioPortrait() {
   return (

apps/v4/examples/base/aspect-ratio-rtl.tsx

@@ -2,12 +2,12 @@
 
 import * as React from "react"
 import Image from "next/image"
-import { AspectRatio } from "@/examples/base/ui-rtl/aspect-ratio"
 
 import {
   useTranslation,
   type Translations,
 } from "@/components/language-selector"
+import { AspectRatio } from "@/styles/base-nova/ui-rtl/aspect-ratio"
 
 const translations: Translations = {
   en: {

apps/v4/examples/base/aspect-ratio-square.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image"
-import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+import { AspectRatio } from "@/styles/base-nova/ui/aspect-ratio"
 
 export function AspectRatioSquare() {
   return (

apps/v4/examples/base/avatar-badge-icon.tsx

@@ -1,10 +1,11 @@
+import { PlusIcon } from "lucide-react"
+
 import {
   Avatar,
   AvatarBadge,
   AvatarFallback,
   AvatarImage,
-} from "@/examples/base/ui/avatar"
-import { PlusIcon } from "lucide-react"
+} from "@/styles/base-nova/ui/avatar"
 
 export function AvatarBadgeIconExample() {
   return (

apps/v4/examples/base/avatar-badge.tsx

@@ -3,7 +3,7 @@ import {
   AvatarBadge,
   AvatarFallback,
   AvatarImage,
-} from "@/examples/base/ui/avatar"
+} from "@/styles/base-nova/ui/avatar"
 
 export function AvatarWithBadge() {
   return (

apps/v4/examples/base/avatar-basic.tsx

@@ -1,4 +1,8 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/styles/base-nova/ui/avatar"
 
 export default function AvatarDemo() {
   return (

apps/v4/examples/base/avatar-demo.tsx

@@ -5,7 +5,7 @@ import {
   AvatarGroup,
   AvatarGroupCount,
   AvatarImage,
-} from "@/examples/base/ui/avatar"
+} from "@/styles/base-nova/ui/avatar"
 
 export default function AvatarDemo() {
   return (

apps/v4/examples/base/avatar-dropdown.tsx

@@ -1,7 +1,11 @@
 "use client"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
-import { Button } from "@/examples/base/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/styles/base-nova/ui/avatar"
+import { Button } from "@/styles/base-nova/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,7 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/examples/base/ui/dropdown-menu"
+} from "@/styles/base-nova/ui/dropdown-menu"
 
 export function AvatarDropdown() {
   return (

apps/v4/examples/base/avatar-group-count-icon.tsx

@@ -1,11 +1,12 @@
+import { PlusIcon } from "lucide-react"
+
 import {
   Avatar,
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
   AvatarImage,
-} from "@/examples/base/ui/avatar"
-import { PlusIcon } from "lucide-react"
+} from "@/styles/base-nova/ui/avatar"
 
 export function AvatarGroupCountIconExample() {
   return (

apps/v4/examples/base/avatar-group-count.tsx

@@ -4,7 +4,7 @@ import {
   AvatarGroup,
   AvatarGroupCount,
   AvatarImage,
-} from "@/examples/base/ui/avatar"
+} from "@/styles/base-nova/ui/avatar"
 
 export function AvatarGroupCountExample() {
   return (

apps/v4/examples/base/avatar-group.tsx

@@ -3,7 +3,7 @@ import {
   AvatarFallback,
   AvatarGroup,
   AvatarImage,
-} from "@/examples/base/ui/avatar"
+} from "@/styles/base-nova/ui/avatar"
 
 export function AvatarGroupExample() {
   return (

apps/v4/examples/base/avatar-rtl.tsx

@@ -1,6 +1,11 @@
 "use client"
 
 import * as React from "react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
 import {
   Avatar,
   AvatarBadge,
@@ -8,12 +13,7 @@ import {
   AvatarGroup,
   AvatarGroupCount,
   AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-
-import {
-  useTranslation,
-  type Translations,
-} from "@/components/language-selector"
+} from "@/styles/base-nova/ui-rtl/avatar"
 
 const translations: Translations = {
   en: {

apps/v4/examples/base/avatar-size.tsx

@@ -1,4 +1,8 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/styles/base-nova/ui/avatar"
 
 export function AvatarSizeExample() {
   return (

apps/v4/examples/base/badge-colors.tsx

@@ -1,4 +1,4 @@
-import { Badge } from "@/examples/base/ui/badge"
+import { Badge } from "@/styles/base-nova/ui/badge"
 
 export function BadgeCustomColors() {
   return (

apps/v4/examples/base/badge-demo.tsx

@@ -1,4 +1,4 @@
-import { Badge } from "@/examples/base/ui/badge"
+import { Badge } from "@/styles/base-nova/ui/badge"
 
 export default function BadgeDemo() {
   return (

apps/v4/examples/base/badge-icon.tsx

@@ -1,6 +1,7 @@
-import { Badge } from "@/examples/base/ui/badge"
 import { BadgeCheck, BookmarkIcon } from "lucide-react"
 
+import { Badge } from "@/styles/base-nova/ui/badge"
+
 export function BadgeWithIconLeft() {
   return (
     <div className="flex flex-wrap gap-2">

apps/v4/examples/base/badge-link.tsx

@@ -1,6 +1,7 @@
-import { Badge } from "@/examples/base/ui/badge"
 import { ArrowUpRightIcon } from "lucide-react"
 
+import { Badge } from "@/styles/base-nova/ui/badge"
+
 export function BadgeAsLink() {
   return (
     <Badge render={<a href="#link" />}>

apps/v4/examples/base/badge-rtl.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { Badge } from "@/examples/base/ui-rtl/badge"
 import { BadgeCheck, BookmarkIcon } from "lucide-react"
 
 import {
   useTranslation,
   type Translations,
 } from "@/components/language-selector"
+import { Badge } from "@/styles/base-nova/ui-rtl/badge"
 
 const translations: Translations = {
   en: {

apps/v4/examples/base/badge-spinner.tsx

@@ -1,5 +1,5 @@
-import { Badge } from "@/examples/base/ui/badge"
-import { Spinner } from "@/examples/base/ui/spinner"
+import { Badge } from "@/styles/base-nova/ui/badge"
+import { Spinner } from "@/styles/base-nova/ui/spinner"
 
 export function BadgeWithSpinner() {
   return (