Fix other package component

.changeset/hip-berries-drop.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix transforming component from other package

apps/landing/package.json

@@ -13,9 +13,9 @@
     "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.1.4",
+    "@next/mdx": "^15.1.5",
     "@types/mdx": "^2.0.13",
-    "next": "^15.1.4",
+    "next": "^15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-syntax-highlighter": "^15.6.1",

apps/landing/src/app/(detail)/docs/LeftMenu.tsx

@@ -24,7 +24,7 @@ export function LeftMenu() {
             children: 'Input',
           },
           {
-            to: URL_PREFIX + '/docs/api/input',
+            to: URL_PREFIX + '/docs/api/text',
             children: 'Text',
           },
           {
@@ -43,6 +43,10 @@ export function LeftMenu() {
             to: URL_PREFIX + '/docs/api/center',
             children: 'Center',
           },
+          {
+            to: URL_PREFIX + '/docs/api/grid',
+            children: 'Grid',
+          },
           {
             to: URL_PREFIX + '/docs/api/css',
             children: 'css',
@@ -81,6 +85,10 @@ export function LeftMenu() {
             to: URL_PREFIX + '/docs/devup/breakpoints',
             children: 'Breakpoints',
           },
+          {
+            to: URL_PREFIX + '/docs/devup/figma-plugin',
+            children: 'Figma Plugin',
+          },
         ]}
       >
         Devup

apps/landing/src/app/(detail)/docs/MenuItem.tsx

@@ -1,21 +1,26 @@
+'use client'
 import { Box, css, Flex, Text } from '@devup-ui/react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 
 import { OpenMenuItem } from './OpenMenuItem'
 
 export interface MenuItemProps {
-  selected?: boolean
   children?: React.ReactNode
   to?: string
   subMenu?: {
-    selected?: boolean
     children?: React.ReactNode
     to?: string
   }[]
 }
 
 export function MenuItem(props: MenuItemProps) {
-  const { selected, children, to, subMenu } = props
+  const { children, to, subMenu } = props
+  const path = usePathname()
+  const selected = to
+    ? path.startsWith(to)
+    : !!subMenu?.some((item) => (item.to ? path.startsWith(item.to) : false))
+
   if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
   const inner = (
     <Flex

apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx

@@ -1,18 +1,22 @@
 'use client'
 import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import { Fragment, useReducer } from 'react'
 
 import { URL_PREFIX } from '../../../constants'
 import { MenuItemProps } from './MenuItem'
 
 export function OpenMenuItem({
-  selected,
   children,
   subMenu,
 }: Omit<MenuItemProps, 'subMenu' | 'to'> &
   Required<Pick<MenuItemProps, 'subMenu'>>) {
-  const [open, handleOpen] = useReducer((state) => !state, false)
+  const path = usePathname()
+  const selected = subMenu.some((item) =>
+    item.to ? path.startsWith(item.to) : false,
+  )
+  const [open, handleOpen] = useReducer((state) => !state, selected)
   return (
     <>
       <Flex
@@ -47,16 +51,24 @@ export function OpenMenuItem({
           <Box borderRight="1px solid var(--border, #E0E0E0)" w="10px" />
           <VStack flex="1" gap="4px">
             {subMenu.map(({ children, to }, idx) => {
+              const selected = to ? path.startsWith(to) : false
               const inner = (
                 <Flex
                   alignItems="center"
-                  bg="$menuActive"
+                  bg={selected ? '$menuActive' : undefined}
                   borderRadius="6px"
                   gap="10px"
                   p="10px"
                 >
-                  <Box bg="$primary" borderRadius="100%" boxSize="8px" />
-                  <Text color="$text" flex="1" typography="buttonS">
+                  {selected && (
+                    <Box bg="$primary" borderRadius="100%" boxSize="8px" />
+                  )}
+                  <Text
+                    color={selected ? '$title' : '$text'}
+                    flex="1"
+                    opacity={selected ? '1' : '0.8'}
+                    typography={selected ? 'buttonS' : 'buttonSmid'}
+                  >
                     {children}
                   </Text>
                 </Flex>

apps/landing/src/app/(detail)/docs/api/grid/page.mdx

@@ -0,0 +1 @@
+# Grid

apps/landing/src/components/Header/HeaderWrap.tsx

@@ -9,21 +9,23 @@ export function HeaderWrap({ children }: { children: React.ReactNode }) {
   return (
     <Box
       pos={isRoot ? 'fixed' : 'sticky'}
-      top={isRoot ? 5 : 0}
+      pt={isRoot ? [null, null, 5] : undefined}
+      px={[null, null, 4]}
+      top="0"
       transition="all, 0.2s"
       w="100%"
       zIndex={1}
     >
       <Flex
         alignItems="center"
         bg="$containerBackground"
-        borderRadius={isRoot ? '16px' : undefined}
+        borderRadius={isRoot ? [null, null, '16px'] : undefined}
         boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
-        h="70px"
+        h={['50px', null, '70px']}
         justifyContent="space-between"
         maxW={isRoot ? '1440px' : '100%'}
         mx="auto"
-        px="40px"
+        px={[4, 5, '40px']}
       >
         {children}
       </Flex>

apps/next/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "^15.1.4",
+    "next": "^15.1.5",
     "@devup-ui/react": "workspace:*"
   },
   "devDependencies": {

apps/vite-lib/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "react": "^19.0.0",
     "@devup-ui/react": "workspace:*",
-    "vite": "^6.0.7"
+    "vite": "^6.0.11"
   },
   "devDependencies": {
     "vite-plugin-dts": "^4.5.0",

apps/vite/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@devup-ui/vite-plugin": "workspace:*",
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5",
     "@types/node": "^22",

benchmark/next-chakra-ui/package.json

@@ -10,9 +10,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.3.1",
+    "@chakra-ui/react": "^3.4.0",
     "@emotion/react": "^11.14.0",
-    "next": "^15.1.4",
+    "next": "^15.1.5",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

benchmark/next-devup-ui/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "^15.1.4",
+    "next": "^15.1.5",
     "@devup-ui/react": "workspace:*"
   },
   "devDependencies": {

benchmark/next-kuma-ui/package.json

@@ -12,11 +12,11 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "^15.1.4",
-    "@kuma-ui/core": "^1.5.8"
+    "next": "^15.1.5",
+    "@kuma-ui/core": "^1.5.9"
   },
   "devDependencies": {
-    "@kuma-ui/next-plugin": "^1.3.2",
+    "@kuma-ui/next-plugin": "^1.3.3",
     "typescript": "^5",
     "@types/node": "^22",
     "@types/react": "^19",

libs/extractor/src/lib.rs

@@ -159,7 +159,7 @@ mod tests {
         assert_debug_snapshot!(extract(
             "test.tsx",
             r"import {Box} from '@devup-ui/core'
-        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} />
+        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} />
         ",
             ExtractOption {
                 package: "@devup-ui/core".to_string(),
@@ -1347,4 +1347,23 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
         )
         .unwrap());
     }
+
+    #[test]
+    #[serial]
+    fn avoid_same_name_component() {
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Box} from '@devup-ui/core'
+import {Button} from '@devup/ui'
+            ;<Box bg="red" background="red" />
+            ;<Button bg="red" background="red" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
 }

libs/extractor/src/snapshots/extractor__tests__avoid_same_name_component.snap

@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Button } from \"@devup/ui\";\n<div className=\"d0\" />;\n<Button bg=\"red\" background=\"red\" />;\n",
+}

libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} />\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+expression: "extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} />\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
 ---
 ExtractOutput {
     styles: [
@@ -14,5 +14,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div ref={ref} data-test={1} role={2} children={[]} onClick={() => {}} aria-valuenow={24} key={2} className=\"d0\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div ref={ref} data-test={1} role={2} children={[]} onClick={() => {}} aria-valuenow={24} key={2} tabIndex={1} className=\"d0\" />;\n",
 }

libs/extractor/src/utils.rs

@@ -44,6 +44,7 @@ static SPECIAL_PROPERTIES: Lazy<HashSet<&str>> = Lazy::new(|| {
         "src",
         "children",
         "placeholder",
+        "tabIndex",
         "maxLength",
         "minLength",
     ] {

libs/extractor/src/visit.rs

@@ -283,6 +283,7 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
 
         let opening_element = &mut elem.opening_element;
         let component_name = &opening_element.name.to_string();
+        println!("component_name: {} {:?}", component_name, self.imports);
         if let Some(kind) = self.imports.get(component_name) {
             let attrs = &mut opening_element.attributes;
             let mut tag_name = kind.to_tag().unwrap_or("div").to_string();
@@ -296,7 +297,6 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                 if let Attribute(ref mut attr) = &mut attr {
                     if let Identifier(name) = &attr.name {
                         let name = sort_to_long(name.name.as_str());
-                        println!("name: {} {:?}", name, duplicate_set);
                         if duplicate_set.contains(&name) {
                             continue;
                         }
@@ -402,17 +402,21 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
 
             return;
         }
-        if let Some(specifiers) = &mut it.specifiers {
-            for i in (0..specifiers.len()).rev() {
-                if let ImportSpecifier(import) = &specifiers[i] {
-                    if let Ok(kind) = ExportVariableKind::try_from(import.imported.to_string()) {
-                        self.imports.insert(import.local.to_string(), kind);
 
-                        // remove specifier
-                        specifiers.remove(i);
-                    } else if import.imported.to_string() == "css" {
-                        self.css_imports
-                            .insert(import.local.to_string(), it.source.value.to_string());
+        if it.source.value == self.package {
+            if let Some(specifiers) = &mut it.specifiers {
+                for i in (0..specifiers.len()).rev() {
+                    if let ImportSpecifier(import) = &specifiers[i] {
+                        if let Ok(kind) = ExportVariableKind::try_from(import.imported.to_string())
+                        {
+                            self.imports.insert(import.local.to_string(), kind);
+
+                            // remove specifier
+                            specifiers.remove(i);
+                        } else if import.imported.to_string() == "css" {
+                            self.css_imports
+                                .insert(import.local.to_string(), it.source.value.to_string());
+                        }
                     }
                 }
             }

package.json

@@ -14,8 +14,8 @@
   "devDependencies": {
     "eslint-plugin-devup": "^2.0.1",
     "eslint": "^9.18.0",
-    "vitest": "^2.1.8",
-    "@vitest/coverage-v8": "^2.1.8",
+    "vitest": "^3.0.3",
+    "@vitest/coverage-v8": "^3.0.3",
     "@changesets/cli": "^2.27.11",
     "@types/node": "^22.10.7"
   },

packages/next-plugin/package.json

@@ -27,9 +27,9 @@
     "next": "^15.1"
   },
   "devDependencies": {
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.3",
     "typescript": "^5.7.3"
   },
   "peerDependencies": {

packages/react/package.json

@@ -27,9 +27,9 @@
     "csstype": "^3.1"
   },
   "devDependencies": {
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.3",
     "typescript": "^5.7.3",
     "@types/react": "^19"
   },

packages/webpack-plugin/package.json

@@ -34,10 +34,10 @@
     "@devup-ui/wasm": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "@types/webpack": "^5.28.5",
     "vite-plugin-dts": "^4.5.0",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.3",
     "typescript": "^5.7.3"
   }
 }