Merge pull request #6 from fellipeutaka/next

Next

apps/www/package.json

@@ -39,6 +39,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^4.0.0",
     "tailwindcss-motion": "^1.0.1",
+    "tailwindcss-react-aria-components": "nightly",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "velite": "^0.2.2"

apps/www/src/app/_components/hero-section.tsx

@@ -17,7 +17,7 @@ export function HeroSection() {
         >
           <Icons.Sparkles className="mr-2 size-4 text-primary" />
           Star us on GitHub
-          <Icons.ChevronRight className="ml-2 size-4 transition group-data-hovered:translate-x-0.5" />
+          <Icons.ChevronRight className="ml-2 size-4 transition group-hover:translate-x-0.5" />
         </LinkButton>
         <h1 className="max-w-xl text-balance font-bold font-display text-4xl leading-tight tracking-tight md:text-5xl lg:text-6xl">
           Elevate Your Design to{" "}
@@ -73,6 +73,14 @@ export function HeroSection() {
           >
             <Icons.RadixUI className="size-10" />
           </a>
+          <a
+            href="https://motion.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Motion"
+          >
+            <Icons.Motion className="size-10" />
+          </a>
         </div>
       </div>
       <div className="hidden px-10 lg:block xl:px-20">

apps/www/src/app/docs/[[...slug]]/_components/contribute.tsx

@@ -48,7 +48,7 @@ export function Contribute({ doc }: ContributeProps) {
               href={link.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center text-muted-fg text-sm data-hovered:text-fg"
+              className="inline-flex items-center text-muted-fg text-sm hover:text-fg"
             >
               <link.icon className="mr-2 size-4" />
               {link.text}

apps/www/src/components/mdx/component-preview.tsx

@@ -28,7 +28,7 @@ export function ComponentPreview({ children, name }: ComponentPreviewProps) {
 
   return (
     <TabsRoot className="mt-6" variant="underline" defaultSelectedKey="preview">
-      <TabsList className="mb-3 data-[orientation=horizontal]:gap-x-0">
+      <TabsList className="mb-3 orientation-horizontal:gap-x-0">
         <TabsTrigger id="preview" className="px-4">
           Preview
         </TabsTrigger>

apps/www/src/components/mdx/copy-button.tsx

@@ -19,7 +19,7 @@ export function CopyButton({ text, className, ...props }: CopyButtonProps) {
   return (
     <Button
       className={cx(
-        "size-8 bg-secondary opacity-0 focus-visible:opacity-100 group-hover:opacity-100 data-hovered:bg-bg",
+        "size-8 bg-secondary opacity-0 hover:bg-bg focus-visible:opacity-100 group-hover:opacity-100",
         className
       )}
       size="icon"
@@ -56,7 +56,7 @@ export function CopyNpmButton({
     <DropdownMenu.Root isOpen={isOpen} onOpenChange={setIsOpen}>
       <Button
         className={cx(
-          "size-8 bg-secondary focus-visible:opacity-100 group-hover:opacity-100 data-hover:bg-bg [@media(pointer:fine)]:opacity-0",
+          "size-8 bg-secondary hover:bg-bg focus-visible:opacity-100 group-hover:opacity-100 [@media(pointer:fine)]:opacity-0",
           isOpen && "bg-bg opacity-100!",
           className
         )}

apps/www/src/components/mdx/folder.tsx

@@ -21,7 +21,9 @@ export function Folder({
 
   return (
     <Collapsible.Root open={isOpen} onOpenChange={setIsOpen} {...rest}>
-      <Collapsible.Trigger className={FileStyles({ className })}>
+      <Collapsible.Trigger
+        className={FileStyles({ className: ["cursor-pointer", className] })}
+      >
         <FolderIcon title={name} isOpen={isOpen} />
         {name}
       </Collapsible.Trigger>

apps/www/src/components/mdx/mdx-components.tsx

@@ -131,7 +131,7 @@ export const mdxComponents = {
   TabList: ({ className, ...props }: TabsListProps<object>) => (
     <TabsList
       {...props}
-      className={cn("data-[orientation=horizontal]:gap-x-0", className)}
+      className={cn("orientation-horizontal:gap-x-0", className)}
     />
   ),
   TabTrigger: ({ className, ...props }: TabsTriggerProps) => (

apps/www/src/components/site-footer.tsx

@@ -85,7 +85,7 @@ export function SiteFooter() {
                     href={item.href}
                     isDisabled={item.disabled}
                     className={
-                      "text-muted-fg text-sm underline decoration-transparent transition duration-200 data-disabled:cursor-not-allowed not-[data-[disabled=true]]:data-hovered:decoration-current data-disabled:opacity-50"
+                      "text-muted-fg text-sm underline decoration-transparent transition duration-200 not-[data-[disabled=true]]:hover:decoration-current"
                     }
                   >
                     {item.title}

apps/www/src/components/ui/accordion-alpha/styles.ts

@@ -11,12 +11,12 @@ export const AccordionStyles = {
   }),
   TriggerIcon: cva({
     base: [
-      "size-4 shrink-0 text-muted-fg transition-transform duration-200 group-data-[expanded=true]:rotate-180",
+      "size-4 shrink-0 text-muted-fg transition-transform duration-200 group-expanded:rotate-180",
     ],
   }),
   Content: cva({
     base: [
-      "grid grid-rows-0 overflow-hidden text-sm transition-all duration-500 group-data-[expanded=true]:grid-rows-1",
+      "grid grid-rows-0 overflow-hidden text-sm transition-all duration-500 group-expanded:grid-rows-1",
     ],
   }),
 };

apps/www/src/components/ui/button/styles.ts

@@ -3,51 +3,51 @@ import { cva } from "~/lib/cva";
 export const ButtonStyles = cva({
   base: [
     "inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md font-medium text-sm outline-hidden ring-offset-2 ring-offset-bg transition",
-    "data-focus-visible:ring-1",
+    "focus-visible:ring-1",
     "disabled:cursor-not-allowed disabled:opacity-50",
-    "data-pressed:scale-95",
+    "pressed:scale-95",
   ],
 
   variants: {
     variant: {
       default: [
         "bg-primary text-primary-fg shadow-sm",
-        "data-hovered:bg-primary/90",
-        "data-focus-visible:ring-primary",
+        "hover:bg-primary/90",
+        "focus-visible:ring-primary",
       ],
       success: [
         "bg-success text-success-fg shadow-xs",
-        "data-hovered:bg-success/90",
-        "data-focus-visible:ring-success",
+        "hover:bg-success/90",
+        "focus-visible:ring-success",
       ],
       warning: [
         "bg-warning text-warning-fg shadow-xs",
-        "data-hovered:bg-warning/90",
-        "data-focus-visible:ring-warning",
+        "hover:bg-warning/90",
+        "focus-visible:ring-warning",
       ],
       danger: [
         "bg-danger text-danger-fg shadow-xs",
-        "data-hovered:bg-danger/90",
-        "data-focus-visible:ring-danger",
+        "hover:bg-danger/90",
+        "focus-visible:ring-danger",
       ],
       outline: [
         "border border-input bg-bg shadow-xs",
-        "data-hovered:bg-accent data-hovered:text-accent-fg",
-        "data-focus-visible:ring-accent",
+        "hover:bg-accent hover:text-accent-fg",
+        "focus-visible:ring-accent",
       ],
       secondary: [
         "bg-secondary text-secondary-fg shadow-xs",
-        "data-hovered:bg-secondary/80",
-        "data-focus-visible:ring-secondary",
+        "hover:bg-secondary/80",
+        "focus-visible:ring-secondary",
       ],
       ghost: [
-        "data-hovered:bg-accent data-hovered:text-accent-fg",
-        "data-focus-visible:ring-accent",
+        "hover:bg-accent hover:text-accent-fg",
+        "focus-visible:ring-accent",
       ],
       link: [
         "text-primary underline-offset-4",
-        "data-hovered:underline",
-        "data-focus-visible:ring-ring",
+        "hover:underline",
+        "focus-visible:ring-ring",
       ],
       unset: null,
     },

apps/www/src/components/ui/calendar/styles.ts

@@ -22,9 +22,9 @@ export const CalendarStyles = {
   Cell: cva({
     base: [
       "grid size-8 place-content-center whitespace-nowrap rounded-md p-0 text-accent-fg text-sm transition-colors",
-      "data-hover:bg-accent data-hover:text-accent-fg",
-      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-      "data-selected:bg-primary data-selected:text-primary-fg",
+      "hover:bg-accent hover:text-accent-fg",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "selected:bg-primary selected:text-primary-fg",
     ],
     variants: {
       isToday: {

apps/www/src/components/ui/checkbox/checkbox.tsx

@@ -89,7 +89,7 @@ export function CheckboxIndicator({
       <Icons.Check
         {...props}
         className={CheckboxStyles.Indicator({
-          className: [className, "group-data-selected:block"],
+          className: [className, "group-selected:block"],
         })}
       />
     </>

apps/www/src/components/ui/checkbox/styles.ts

@@ -11,14 +11,14 @@ export const CheckboxStyles = {
     base: [
       "grid size-4 shrink-0 cursor-pointer place-content-center rounded border border-toggle bg-secondary text-bg transition",
 
-      "group-data-selected:border-primary/70 group-data-selected:bg-primary group-data-selected:text-primary-fg",
-      "group-data-selected:group-data-invalid:border-danger/70 group-data-selected:group-data-invalid:bg-danger group-data-selected:group-data-invalid:text-danger-fg",
+      "group-selected:border-primary/70 group-selected:bg-primary group-selected:text-primary-fg",
+      "group-selected:group-invalid:border-danger/70 group-selected:group-invalid:bg-danger group-selected:group-invalid:text-danger-fg",
 
-      "group-data-focus-visible:border-primary/70 group-data-focus-visible:ring-4 group-data-focus-visible:ring-primary/20",
-      "group-data-focus-visible:group-data-invalid:border-danger/70 group-data-focus-visible:group-data-invalid:text-danger-fg group-data-focus-visible:group-data-invalid:ring-danger/20",
+      "group-focus-visible:border-primary/70 group-focus-visible:ring-4 group-focus-visible:ring-primary/20",
+      "group-focus-visible:group-invalid:border-danger/70 group-focus-visible:group-invalid:text-danger-fg group-focus-visible:group-invalid:ring-danger/20",
 
-      "group-data-invalid:border-danger/70 group-data-invalid:bg-danger/20 group-data-invalid:text-danger-fg group-data-invalid:ring-danger/20",
-      "group-data-disabled:cursor-not-allowed",
+      "group-invalid:border-danger/70 group-invalid:bg-danger/20 group-invalid:text-danger-fg group-invalid:ring-danger/20",
+      "group-disabled:cursor-not-allowed",
     ],
   }),
   Indicator: cva({

apps/www/src/components/ui/dialog/styles.ts

@@ -4,8 +4,8 @@ export const DialogStyles = {
   Overlay: cva({
     base: [
       "fixed inset-0 z-50",
-      "data-entering:motion-opacity-in data-entering:motion-duration-500",
-      "data-exiting:motion-opacity-out data-exiting:motion-duration-300",
+      "entering:motion-opacity-in entering:motion-duration-500",
+      "exiting:motion-opacity-out exiting:motion-duration-300",
       "has-[[data-side=center]]:motion-duration-150!",
     ],
     variants: {
@@ -21,36 +21,36 @@ export const DialogStyles = {
   Modal: cva({
     base: [
       "data-[side=center]:motion-duration-150! fixed z-50 w-full bg-bg p-6 shadow-lg outline-none",
-      "data-entering:motion-opacity-in data-entering:motion-duration-500",
-      "data-exiting:motion-opacity-out data-exiting:motion-duration-300",
+      "entering:motion-opacity-in entering:motion-duration-500",
+      "exiting:motion-opacity-out exiting:motion-duration-300",
       "sm:rounded-lg",
     ],
     variants: {
       side: {
         top: [
           "inset-x-0 top-0 left-0 border-b",
-          "data-entering:-motion-translate-y-in-100",
-          "data-exiting:-motion-translate-y-out-100",
+          "entering:-motion-translate-y-in-100",
+          "exiting:-motion-translate-y-out-100",
         ],
         bottom: [
           "inset-x-0 bottom-0 border-t ease-in-out",
-          "data-entering:motion-translate-y-in-100",
-          "data-exiting:motion-translate-y-out-100",
+          "entering:motion-translate-y-in-100",
+          "exiting:motion-translate-y-out-100",
         ],
         left: [
           "inset-y-0 left-0 h-full w-3/4 border-r ease-in-out sm:max-w-sm",
-          "data-entering:-motion-translate-x-in-100",
-          "data-exiting:-motion-translate-x-out-100",
+          "entering:-motion-translate-x-in-100",
+          "exiting:-motion-translate-x-out-100",
         ],
         right: [
           "inset-y-0 right-0 h-full w-3/4 border-l ease-in-out sm:max-w-sm",
-          "data-entering:motion-translate-x-in-100",
-          "data-exiting:motion-translate-x-out-100",
+          "entering:motion-translate-x-in-100",
+          "exiting:motion-translate-x-out-100",
         ],
         center: [
           "-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 grid max-w-lg gap-4 border",
-          "data-entering:motion-scale-in-95",
-          "data-exiting:motion-scale-out-95",
+          "entering:motion-scale-in-95",
+          "exiting:motion-scale-out-95",
         ],
       },
     },
@@ -65,8 +65,8 @@ export const DialogStyles = {
     base: [
       "absolute top-4 right-4 size-4 rounded-sm opacity-70 outline-none ring-offset-bg transition",
       "hover:opacity-100",
-      "data-focus-visible:ring-2 data-focus-visible:ring-ring data-focus-visible:ring-offset-2",
-      "data-disabled:pointer-events-none",
+      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none",
     ],
   }),
   Header: cva({

apps/www/src/components/ui/icons.tsx

@@ -1371,6 +1371,19 @@ export const Icons = {
       />
     </svg>
   ),
+  Motion: (props) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1103 386"
+      role="presentation"
+      {...props}
+    >
+      <path
+        fill="#FFF312"
+        d="M416.473 0L198.54 385.66H0L170.17 84.522C196.549 37.842 262.377 0 317.203 0zm486.875 96.415c0-53.249 44.444-96.415 99.27-96.415 54.826 0 99.27 43.166 99.27 96.415 0 53.248-44.444 96.415-99.27 96.415-54.826 0-99.27-43.167-99.27-96.415zM453.699 0h198.54L434.306 385.66h-198.54zm234.492 0h198.542L716.56 301.138c-26.378 46.68-92.207 84.522-147.032 84.522h-99.27z"
+      />
+    </svg>
+  ),
   X: (props) => (
     <svg
       role="img"

apps/www/src/components/ui/link/styles.ts

@@ -3,21 +3,19 @@ import { cva } from "~/lib/cva";
 export const LinkStyles = cva({
   base: [
     "relative outline-none transition-colors",
-    "data-focus-visible:ring-default",
-    "data-disabled:cursor-default data-disabled:opacity-60",
-    "data-disabled:data-focus-visible:outline-0",
+    "focus-visible:ring-default",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+    "disabled:focus-visible:outline-0",
   ],
 
   variants: {
     variant: {
       unstyled: ["text-current"],
-      default: ["text-muted-fg transition-colors data-hovered:text-fg"],
-      primary: ["text-primary data-hovered:text-primary/80"],
-      danger: ["text-danger data-hovered:text-danger/80"],
-      "lad/primary": [
-        "text-fg data-hovered:text-primary dark:data-hovered:text-primary/80",
-      ],
-      secondary: ["text-secondary-fg data-hovered:text-secondary-fg/80"],
+      default: ["text-muted-fg transition-colors hover:text-fg"],
+      primary: ["text-primary hover:text-primary/80"],
+      danger: ["text-danger hover:text-danger/80"],
+      "lad/primary": ["text-fg hover:text-primary dark:hover:text-primary/80"],
+      secondary: ["text-secondary-fg hover:text-secondary-fg/80"],
       underline: ["font-medium underline underline-offset-4"],
     },
   },

apps/www/src/components/ui/number-field/styles.ts

@@ -12,7 +12,7 @@ export const NumberFieldStyles = {
   StepperButton: cva({
     base: [
       "cursor-default px-2 text-muted-fg",
-      "data-pressed:bg-primary data-pressed:text-primary-fg",
+      "pressed:bg-primary pressed:text-primary-fg",
       "group-disabled:bg-secondary",
     ],
   }),

apps/www/src/components/ui/popover/styles.ts

@@ -7,17 +7,17 @@ export const PopoverStyles = {
       "[scrollbar-width:thin] dark:backdrop-blur-2xl dark:backdrop-saturate-200 [&::-webkit-scrollbar]:size-0.5",
 
       "motion-duration-150",
-      "data-entering:motion-opacity-in data-entering:motion-ease-out",
-      "data-entering:data-[placement=left]:motion-translate-x-in-[0.25rem]",
-      "data-entering:data-[placement=right]:motion-translate-x-in-[-0.25rem]",
-      "data-entering:data-[placement=top]:motion-translate-y-in-[0.25rem]",
-      "data-entering:data-[placement=bottom]:motion-translate-y-in-[-0.25rem]",
+      "entering:motion-opacity-in entering:motion-ease-out",
+      "entering:placement-left:motion-translate-x-in-[0.25rem]",
+      "entering:placement-right:motion-translate-x-in-[-0.25rem]",
+      "entering:placement-top:motion-translate-y-in-[0.25rem]",
+      "entering:placement-bottom:motion-translate-y-in-[-0.25rem]",
 
-      "data-exiting:motion-opacity-out data-exiting:motion-ease-in",
-      "data-exiting:data-[placement=left]:motion-translate-x-out-[0.25rem]",
-      "data-exiting:data-[placement=right]:motion-translate-x-out-[-0.25rem]",
-      "data-exiting:data-[placement=top]:motion-translate-y-out-[0.25rem]",
-      "data-exiting:data-[placement=bottom]:motion-translate-y-out-[-0.25rem]",
+      "exiting:motion-opacity-out exiting:motion-ease-in",
+      "exiting:placement-left:motion-translate-x-out-[0.25rem]",
+      "exiting:placement-right:motion-translate-x-out-[-0.25rem]",
+      "exiting:placement-top:motion-translate-y-out-[0.25rem]",
+      "exiting:placement-bottom:motion-translate-y-out-[-0.25rem]",
     ],
     variants: {
       isMenu: {
@@ -28,7 +28,7 @@ export const PopoverStyles = {
   Arrow: cva({
     base: [
       "block fill-popover stroke-border",
-      "group-data-[placement=left]:-rotate-90 group-data-[placement=bottom]:rotate-180 group-data-[placement=right]:rotate-90",
+      "group-placement-left:-rotate-90 group-placement-bottom:rotate-180 group-placement-right:rotate-90",
     ],
   }),
 };